Question

所以，我有两个元素，一个嵌套在另一个

中

<div id="outer">
    <div id="inner">
         <p>Lorem Ipsum</p>
    </div>
</div>

外部容器比内部大，影响模态叠加布局。我想在外部的暴露表面上注册一个单击事件，这将导致两者都被解除，但是如果你点击内部div，我不希望发生这种情况。

我正在使用jQuery委托/ stopPropagation，并试图询问该元素以确保它是外部div，但无济于事 - 它仍然收到外部事件。我正在考虑在内部div之外的一个击中区域进行手动操作，但我想知道是否有更优雅的选择。

编辑：

这里发布了几个好的解决方案 - 非常感谢您的反馈！

Answer 1

$("#inner").click(function(event){
  event.stopPropagation();
  // do something
});

这是一个小提琴： http://jsfiddle.net/sajjansarkar/fA2sd/1/

Answer 2

$('#outer').on('click', function (e) {
    if ( e.target != this) return;
    // run your code here...
});

这是小提琴：http://jsfiddle.net/9sLCx/

Answer 3

事件对象作为两个属性，可以帮助您完成此任务：

event.currentTarget标识事件的当前目标，因为事件遍历DOM。它始终引用事件处理程序附加到的元素，而不是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);
}

防止重叠HTML元素触发事件

3 个答案: