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();

});

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

TIA,亚当

Answer 1

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

你捕捉......然后吃...... 那个事件:

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

这里的关键是click,mousedown和mouseup是不同的事件.虽然你可能认为的click作为是一个mousedown接着一个mouseup,在现实中,你可能有click被甚至不涉及鼠标,以及组合的用户操作触发的事件,mousedown并且mouseup不以任何导致click事件的.