Question

Code：

<div id="container">
    <div id="link">Link</div>
</div>

$('#link').click(function (e) {
    console.log("link");                
});

$('#container').mousedown(function (e) {
    console.log("container");                
});

我喜欢这样，当我点击#link时，它不会触发#container处理程序。试过stopPropagation()或preventDefault()，但我认为这是错误的approch？

Answer 1

mousedown处理程序在click处理程序之前触发，因此您无法从mousedown处理程序取消click处理程序，因为mousedown事件已经冒泡到父元素。

如果不修改其他处理程序，我只需在内部元素中添加mousedown处理程序即可停止mousedown事件传播。

$('#link').click(function (e) {
    console.log("link");
}).mousedown(function (e) { //stops the mousedown event propagation from reaching
    e.stopPropagation();   //the parent element
});

$('#container').mousedown(function (e) {
    console.log("container");
});

Fiddle

如果您能够切换处理程序以处理相同的事件（例如click），您将能够像我对{{1}那样从内部元素的处理程序中调用event.stopPropagation()上面的处理程序。

Answer 2

根据这些问题/答案：

Prevent parent container click event from firing when hyperlink clicked

How to prevent trigger container's event when trigger children's events in JQuery?

e.stopPropagation();是正确的方法。

http://jsfiddle.net/MN5KK/1/

编辑：我看到你在容器上使用mousedown而在链接上使用click，鼠标按下事件将始终在点击之前触发，因为点击处于释放状态。

如何在这种情况下停止“传播”？

2 个答案: