JavaScript 点击事件和鼠标按下事件冲突问题

Question

我有一个场景，使用click插入一个

元素，然后使用mousedown拖动它。我将click绑定到父容器上，而将mousedown绑定到

元素本身上。但是当我在

上执行mousedown时，它也会触发父容器的click事件，导致插入多个

元素而不是拖动已添加的

元素！

有没有解决这个问题的方法？我不能取消click绑定，因为我需要使用click添加2个

元素，然后绑定mousedown。

更新：我使用的绑定方式是selector.on(event, handler)。

- Rutwick Gangurde

---

你看过mouseup()函数吗？与click()不同。 - Brian Hoover

这可能会对你有所帮助 event.stopPropagation() - Hary

@BrianHoover 正在查看中... - Rutwick Gangurde

尝试使用 mouseup，但没有成功！在 mousedown 上仍然会调用点击处理程序。 - Rutwick Gangurde

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. mousedown（按下鼠标）

2. click（单击鼠标）

3. mouseup（松开鼠标）

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

- YogeshWaran

---

这是否意味着我必须为两次点击使用两个标志？ - Rutwick Gangurde

做不到啊，"雇主政策"！问题只在于我不想让子元素的mousedown事件影响父元素。 - Rutwick Gangurde

好的，那么在鼠标按下事件中检查目标元素（event.target），如果它是子元素，则跳过该执行... - YogeshWaran

你确定这就是触发鼠标事件的方式吗？我记得应该是按下、松开，然后才是点击 - $('body').on('click mouseup mousedown',function(evt){console.log(evt.type)})。 - lfender6445

@lfender6445是正确的 - 或者至少，我刚在Chrome中进行了测试，我得到了mousedown、mouseup和click这三个事件。 - jbyrd

Answer 2

您希望做的是将事件处理程序附加到父容器而不是单个子div。通过这样做，当创建新的子元素时，您无需添加额外的事件处理程序。

例如：

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

当您向 .on() 函数提供选择器时，该函数将为与该选择器匹配的后代调用。

- zkhr

---

点击事件处理程序已绑定到父元素，而mousedown事件绑定到从点击处理程序添加的子div。您的解决方案将如何帮助我解决这种情况？ - Rutwick Gangurde

请注意在.on()函数中传递的".childDiv"。这与您已经拥有的selector.on(event, handler)不同，因为处理程序不是在单击父元素时调用，而是在单击匹配“.childDiv”的父代元素时调用，这正是您要做的。 - zkhr

我也会尝试这种方法。目前，紧急情况已经通过上述解决方案得到解决！谢谢，点赞！ - Rutwick Gangurde

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/

- aimadnet

---

我尝试过了，我的click事件处理程序仍会在mousedown时被调用！ - Rutwick Gangurde

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

- ShaunTheSheep