jQuery stopPropagation 气泡下降
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2728252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery stopPropagation bubble down
提问by atp
I have a div with a link inside of it:
我有一个 div，里面有一个链接：
<div id="myDiv">
<a href="http://www.lol.com">Lol</a>
</div>
Clicking the <div />should go somewhere, but clicking the child <a />should go to www.lol.com. I've seen from previous questionsand the jQuery websitethat .stopPropagation prevents bubbling upwards, but how do I prevent a bubble downwards (isn't that what's necessary here?).
点击<div />应该去某个地方，但点击孩子<a />应该去www.lol.com。我从之前的问题和jQuery 网站中看到 .stopPropagation 可以防止向上冒泡，但是如何防止向下冒泡（这不是这里必需的吗？）。
回答by Geoff
Events only bubble up. So the click event handler for the aelement is fired before the click event handler for the div. If you want the behaviour you describe, the you need to add a click event handler to the a element which stops propagation to the div.
事件只会冒泡。因此，a元素的点击事件处理程序在div. 如果你想要你描述的行为，你需要向 a 元素添加一个 click 事件处理程序，它停止传播到 div。
$("#myDiv a").click( function(event) {
event.stopPropagation();
} );
and keep whatever event handler you have on the div. This should allow the event to perform it's default action, and prevent the handler on the div being fired.
并保留您在 div 上的任何事件处理程序。这应该允许事件执行它的默认操作，并防止 div 上的处理程序被触发。
If you only want to prevent clicks on links then you can change your event handler for the divelement
如果您只想防止点击链接，那么您可以更改div元素的事件处理程序
$("#myDiv").click( function( event ) {
if( !$( event.target ).is( "a" ) )
{
// existing event handler
}
} );
回答by Vijay
The problem was that clicking the anchor still triggered a click in your <div>. That's called "event bubbling".
问题是点击锚点仍然会触发你的<div>. 这就是所谓的“事件冒泡”。
In fact, there are multiple solutions:
其实有多种解决方案：
Checking in the DIV click event handler whether the actual target element was the anchor → jsFiddle
在 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"));
});
Stopping the event propagation from the anchor click listener → jsFiddle
停止从锚点单击侦听器的事件传播→ jsFiddle
$("#ancherComplaint").click(function (evt) {
evt.stopPropagation();
alert($(this).attr("id"));
});
As you may have noticed, I have removed the following selector part from my examples:
您可能已经注意到，我从示例中删除了以下选择器部分：
:not(#ancherComplaint)
This was unnecessary because there is no element with the class .expandable-panel-heading which also have #ancherComplaintas its ID.
这是不必要的，因为没有具有类 .expandable-panel-heading 的元素也有#ancherComplaint它的 ID。
I assume that you wanted to suppress the event for the anchor. That cannot work in that manner because both selectors (yours and mine) select the exact same DIV. The selector has no influence on the listener when it is called; it only sets the list of elements to which the listeners should be registered. Since this list is the same in both versions, there exists no difference.
我假设您想抑制锚点的事件。这不能以这种方式工作，因为两个选择器（你的和我的）都选择了完全相同的 DIV。选择器在调用时对侦听器没有影响；它只设置侦听器应注册到的元素列表。由于此列表在两个版本中相同，因此没有区别。
