JQuery event.stopPropagation() 不起作用

在我的 html 中，我在 li 中嵌入了一个 DragHandle 类的跨度。

<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 附加事件处理程序，如下所示：

$(".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();

});

当我将鼠标向下和向上移动到元素上时，我会收到向下和向上警报，但是我也收到 li 事件处理程序的单击警报。我认为应该通过在 mousedown 和 mouseup 处理程序中调用 event.stopPropagation 来防止这种情况。如何停止为 DragHandle 上的 mousedown/up 事件调用 click 事件？

TIA， 亚当

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

你捕捉……并吃掉……that event:

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

这里的关键是click, mousedown, and mouseup是不同的事件。虽然你可能会想到click作为一个mousedown随后是一个mouseup，实际上你可能有click由甚至不涉及鼠标的用户操作触发的事件，以及mousedown and mouseup不会导致任何结果click根本没有事件。