jQuery Javascript 单击和鼠标按下冲突
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14618478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript click and mousedown conflicting
提问by Rutwick Gangurde
I have a certain scenario where I'm using clickto insert a div and then mousedownon that div for dragging it around. I have bound the clickto the parent container, and the mousedownon the div itself. But when I mousedownon the div, it fires the click on the parent as well, hence inserting multiple divs instead of dragging the already added div!
我有一个特定的场景，我使用click插入一个 div 然后mousedown在那个 div 上拖动它。我已将 绑定click到父容器，并绑定到mousedowndiv 本身。但是当我mousedown在 div 上时，它也会触发对父级的点击，因此插入多个 div 而不是拖动已经添加的 div！
Is there a way to solve this issue? I can't unbind click, since I need to add 2 divs using the click, and then bind mousedownon these.
有没有办法解决这个问题？我无法解除绑定click，因为我需要使用 来添加 2 个 div click，然后mousedown在这些div 上进行绑定。
Update: I'm using selector.on(event, handler)type of binding.
更新：我正在使用selector.on(event, handler)绑定类型。
采纳答案by YogeshWaran
Try this way. event.stopPropagationdoes not stop the click event from firing after mousedown. Mousedown and click events are not related to each other.
试试这个方法。event.stopPropagation在鼠标按下后不会阻止点击事件触发。Mousedown 和 click 事件彼此不相关。
var mousedownFired = false;
$("#id").on('mousedown', function(event) {
mousedownFired = true;
//code
});
$("#id").on('click', function(event) {
if (mousedownFired) {
mousedownFired = false;
return;
}
//code
});
Update:
更新：
Mouse events are triggered like this:
鼠标事件是这样触发的：
mousedown
click
mouseup
鼠标按下
点击
鼠标向上
If mousedown is triggered, the mousedownFiredvariable will be set to true. Then in the click event, it will return(i.e. not continue processing the click event), and the mousedownFiredvariable will be reset to false, so future click events will fire normally. Not going to consider two mousedown or two click events.
如果 mousedown 被触发，该mousedownFired变量将被设置为true。然后在点击事件中，它会return（即不继续处理点击事件），并且该mousedownFired变量将被重置为false，因此未来的点击事件将正常触发。不会考虑两个 mousedown 或两个点击事件。
回答by zkhr
What you likely want to do is attach the event handlers to the parent container rather than the individual child divs. By doing this, as new children are created, you don't need to add additional event handlers.
您可能想要做的是将事件处理程序附加到父容器而不是单个子 div。通过这样做，在创建新子级时，您不需要添加额外的事件处理程序。
For example:
例如：
$("#parentDiv").on('click','.childDiv',function() {
event.stopPropagation();
}).on('mousedown','.childDiv',function() {
// your dragging code
});
When you provide a selector to the .on() function, the function passed is called for descendants that match that selector.
当您为 .on() 函数提供选择器时，会为匹配该选择器的后代调用传递的函数。
回答by aimadnet
You can use event.stopPropagation().
您可以使用 event.stopPropagation()。
Example :
例子 ：
$("#button").mousedown(function(event){
event.stopPropagation();
// your code here
});
$("#button").click(function(event){
event.stopPropagation();
// your code here
});
Look at this page http://api.jquery.com/event.stopPropagation/
回答by ShaunTheSheep
var timestamp = 0;
jQuery('ul.mwDraggableSelect a',element).mousedown(function(event){
timestamp = new Date().getTime();
});
jQuery('ul.mwDraggableSelect a',element).click(function(event){
var interval = 400;//if a mousedown/mouseup is longer then interval, dont process click
var timestamp2 = new Date().getTime();
if((timestamp2 - timestamp)>interval){ return false; }
/* your code here */
});
