javascript - JQuery event.stopPropagation() 不工作

Question

在我的 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 事件调用点击事件？

TIA,亚当

Answer 1

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

你捕获...并吃掉...那个事件:

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

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