JQuery event.stopPropagation（）不起作用 [英] JQuery event.stopPropagation() not working

问题描述

在我的html中，我有一个嵌入在li中的类dragHandle。

In my html I have a span of class dragHandle embedded within a li.

<div class='treeView'>
    <ul class='tree'>
        <li><span class="dragHandle"></span>Item 1
            <ul>
                <li><span class="dragHandle"></span>Item 2 <a href="#">link</a></li>
            </ul>   
        </li>
</ul>

我使用jQuery附加事件处理程序，如下所示：

I attach event handlers using jQuery as follows:

$(".tree li").click(function(event) {
    alert("click");
    event.stopPropagation();
});

$(".dragHandle").mousedown(function(event) {
    alert("down");
    event.stopPropagation();

});

$(".dragHandle").mouseup(function(event) {
    alert("Up");
    event.stopPropagation();

});

当我mousedown并将鼠标放在元素上时，我会收到警报，但是我也得到了li的事件处理程序的点击提醒也是如此。我认为这应该通过调用mousedown和mouseup处理程序中的event.stopPropagation来防止。如何停止在dragHandle上调用mousedown / up事件的click事件？

When I mousedown and mouse up over the element I get the down and up alerts, however I also get the click alert of the li's event handler too. I thought that this should be prevented from by the call to event.stopPropagation in the mousedown and mouseup handlers. How do I stop the click event being called for mousedown/up events on the dragHandle?

TIA，
Adam

TIA, Adam

推荐答案

如何停止为dragHandle上的mousedown / up事件调用click事件？

How do I stop the click event being called for mousedown/up events on the dragHandle?

你捕捉......并且吃...... 那个事件：

You capture... and eat... that event:

$(".dragHandle").click(function(event) { event.stopPropagation(); });

这里的关键是点击， mousedown 和 mouseup 是不同的事件。虽然您可能会认为单击为 mousedown ，然后是 mouseup ，实际上你可能有点击由甚至不涉及鼠标的用户操作触发的事件，以及 mousedown的组合和 mouseup 根本不会导致任何点击事件。

The key here is that click, mousedown, and mouseup are distinct events. Although you might think of a click as being a mousedown followed by a mouseup, in reality you might have click events triggered by user actions that don't even involve the mouse, as well as combinations of mousedown and mouseup that don't result in any click events at all.

这篇关于JQuery event.stopPropagation（）不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！