如何防止CHILD元素影响PARENT元素?
jQuery的:
$("#parent").click(function() {
alert('parent clicked');
});
$("#child").click(function() {
alert('child clicked');
});
HTML:
<div id="parent">
click me - parent
<div id="child">click me - child</div>
</div>
如果您点击该子项,则父项也会被激活,我们会收到2条提醒。
那么如何防止孩子影响父母呢?
答案 0 :(得分:10)
$("#child").click(function(event) {
event.stopPropagation();
alert('child clicked');
});
调用event.stopPropagation()
将阻止事件冒泡DOM树。
答案 1 :(得分:3)
这称为event bubbling
或event propagation
。可以通过在代码中添加e.stopPropagation()
来防止这种情况。如果您还想停止默认行为,只需执行以下操作:return false;
。
return false;
基本上同时执行:e.stopPropagation()
和e.preventDefault()
。例如,如果您使用<a>
标记,并且希望阻止页面在点击后导航,那么这将非常有用。