Javascript单击和鼠标向下冲突

Question

我有某种情况，我使用 click 插入一个div，然后mousedown该div 以拖动它。我已经将click绑定到父容器，并将mousedown绑定到div 本身。但是当我mousedowndiv 时，它也会在父级上触发单击，因此插入多个div 而不是拖动已经添加的div！

有没有办法解决这个问题？我无法解绑click，因为我需要使用click添加 2 个div，然后在这些div 上绑定mousedown。

更新：我正在使用selector.on(event, handler)类型的绑定。

Answer 1

试试这个方式。 event.stopPropagation 不会阻止单击事件在鼠标按下后触发。鼠标按下和单击事件彼此不相关。

var mousedownFired = false;
$("#id").on('mousedown', function(event) {
    mousedownFired = true;
    //code
});
$("#id").on('click', function(event) {
    if (mousedownFired) {
        mousedownFired = false;
        return;
    }
    //code
});

更新：

鼠标事件按如下方式触发：

1. 鼠标向下

2. 点击

3. 鼠标向上

如果触发鼠标按下，则mousedownFired变量将设置为 true 。然后在点击事件中，它将return（即不再继续处理点击事件），并且mousedownFired变量将被重置为 false，因此未来的点击事件将正常触发。不打算考虑两次鼠标按下或两次单击事件。

Answer 2

您可能

想要做的是将事件处理程序附加到父容器，而不是单个子div。通过执行此操作，在创建新子级时，无需添加其他事件处理程序。

例如：

$("#parentDiv").on('click','.childDiv',function() {
    event.stopPropagation();
}).on('mousedown','.childDiv',function() {
    // your dragging code
});

向 .on（） 函数提供选择器时，将为与该选择器匹配的后代调用传递的函数。

Answer 3

您可以使用

event.stopPropagation（）。

例：

$("#button").mousedown(function(event){
event.stopPropagation();
// your code here
});
$("#button").click(function(event){
event.stopPropagation();
// your code here
});

查看此页面 http://api.jquery.com/event.stopPropagation/

Answer 4

            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 */
            });