防止为重叠的HTML元素触发事件
因此，我有两个元素，一个嵌套在另一个元素中
<div id="outer">
<div id="inner">
<p>Lorem Ipsum</p>
</div>
</div>外部容器比内部容器大，从而实现模式覆盖布局。我想在外部暴露的表面上注册一个click事件，这将导致两者都被清除，但我不希望在单击内部div时发生这种情况。
我正在使用jQuery委托/停止传播，并试图询问元素以确保它是外部div，但无济于事-它仍然接收外部事件。我正在考虑在内部div之外的命中区域进行手摇，但我想知道是否有更优雅的替代方案。
编辑：
这里发布了几个很好的解决方案-非常感谢反馈！
回答 3
Stack Overflow用户
发布于 2013-01-05 01:54:57
$("#inner").click(function(event){
event.stopPropagation();
// do something
}); Stack Overflow用户
发布于 2013-01-05 01:54:22
$('#outer').on('click', function (e) {
if ( e.target != this) return;
// run your code here...
});这就是问题所在：http://jsfiddle.net/9sLCx/
Stack Overflow用户
发布于 2013-01-05 02:04:27
event对象作为两个属性，这两个属性将帮助您完成此任务：
当事件遍历DOM时，event.currentTarget标识事件的当前目标。它总是引用事件处理程序所附加到的元素，而不是标识发生事件的元素的event.target。对于外部div，事件通知将传递两次，第一次是在捕获阶段，第二次是在冒泡阶段，在中间如果在内部div中实例化了一个处理程序，就会收到通知。您可以在需要时停止传播。
http://fiddle.jshell.net/hmariod/dvV4E/
document.getElementById("outer").addEventListener('click',etvFn,true);
document.getElementById("outer").addEventListener('click',etvFn,false);
document.getElementById("inner").addEventListener('click',etvFn,true);
document.getElementById("inner").addEventListener('click',etvFn,false);
document.getElementById("innerP").addEventListener('click',etvFn);
function etvFn(evt){
var phase;
if(evt.eventPhase === 1){
phase = "Capture";
}else if(evt.eventPhase === 2){
phase = "Target";
}else{
phase = "Bubbling";
}
alert("Target:" + evt.target.id + "\nCurrent Target:" + evt.currentTarget.id + "\nPhase:" + phase);
}https://stackoverflow.com/questions/14162237
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号