jquery - Javascript单击和鼠标按下冲突

Question

我有一个特定的场景，我click用来插入一个 div，然后mousedown在那个 div 上拖动它。我已将 绑定click到父容器，并绑定到mousedowndiv 本身。但是当我mousedown在 div 上时，它也会触发对父级的点击，因此插入多个 div 而不是拖动已经添加的 div！

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

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

Answer 1

试试这个方法。event.stopPropagation在 mousedown 后不会停止单击事件的触发。鼠标按下和单击事件彼此无关。

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. mouseup

如果触发 mousedown，则mousedownFired变量将设置为true. 然后在点击事件中，它会return（即不继续处理点击事件），并且该mousedownFired变量将被重置为false，因此未来的点击事件将正常触发。不会考虑两个 mousedown 或两个 click 事件。

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