jQuery stopPropagation bubble down

我有一个带有链接的div：

 Lol  

单击

应该在某个位置，但单击子项应该转到www.lol.com。 我从之前的问题和jQuery网站上看到.stopPropagation可以防止冒泡，但我如何防止泡沫向下（这不是必要的吗？）。

Answer 1

事件只会冒泡。 因此，在div的click事件处理程序之前触发a元素的click事件处理程序。 如果您想要描述的行为，则需要向a元素添加一个click事件处理程序，以停止传播到div。

 $("#myDiv a").click( function(event) { event.stopPropagation(); } ); 

并保留你在div上的任何事件处理程序。 这应该允许事件执行它的默认操作，并防止div上的处理程序被触发。

如果您只想阻止对链接的点击，那么您可以更改div元素的事件处理程序

 $("#myDiv").click( function( event ) { if( !$( event.target ).is( "a" ) ) { // existing event handler } } ); 

Answer 2

问题是单击锚点仍然触发了

的单击。 这被称为“事件冒泡”。

事实上，有多种解决方案：

检查DIV单击事件处理程序是否实际目标元素是锚→jsFiddle

 $('#myDiv').click(function (evt) { if (evt.target.tagName != "A") { alert('123'); } // Also possible if conditions: // - evt.target.id != "ancherComplaint" // - !$(evt.target).is("#ancherComplaint") }); $("#ancherComplaint").click(function () { alert($(this).attr("id")); }); 

从锚点击监听器→jsFiddle停止事件传播

 $("#ancherComplaint").click(function (evt) { evt.stopPropagation(); alert($(this).attr("id")); }); 

您可能已经注意到，我已从示例中删除了以下选择器部分：

 :not(#ancherComplaint) 

这是不必要的，因为没有类.expandable-panel-heading的元素也有#ancherComplaint作为其ID。

我假设您想要抑制锚点的事件。 这不能以那种方式工作，因为两个选择器（你和我的）都选择完全相同的DIV。 选择器在调用时对侦听器没有影响; 它只设置监听器应该注册的元素列表。 由于此列表在两个版本中都相同，因此没有区别。