如何使用Jquery停止链接的传播传播

Question

如何停止调用父绑定？

示例：

<div id="test">
    <a href="#" id="link" onclick="alert('testing')">TEST</a>
</div>

$('#test').on('click',function(){
   alert('I dont want it to fire it up!');        
})

如果我点击#link

，我只想在#link中触发onclick而不是#test上的事件

感谢您的回复

Answer 1

使用stopPropagation

 event.stopPropagation();

Answer 2

在事件处理程序中执行return false会阻止传播。不幸的是，它还会阻止链接的默认行为;例如在你的情况下加载<page url here>#：

<a href="#" id="link" onclick="alert('testing'); return false;">TEST</a>

修改

jQuery.event对象包含一个名为target的有趣属性，如果出现冒泡事件，则会包含接收实际点击的元素。如果有意义，你可以使用它：

$('#test').on('click', function(e) {
    if ($(e.target).is("#link")) {
        alert('#link was clicked; comment out this alert to ignore it');
    }
    else {
        alert('you clicked me but you did not click #link');
    }
});

fiddle

顺便说一句，我想知道混合内联和无阻碍事件处理程序是否有原因？

Answer 3

stopPropagation()可防止事件传播。但是，您必须将事件传递给事件处理程序才能执行此操作。

$('#test').on('click',function(e){
    e.stopPropagation();
})

Answer 4

stopPropagation（）是jQuery内外的有效javascript函数。 jQuery有助于支持IE，但您也可以使用cancelBubble来支持IE。

document.getElementById('link').onclick = function(e) {
  if (e && e.stopPropagation) e.stopPropagation(); else window.event.cancelBubble = true;
}