jquery - 防止触发重叠 HTML 元素的事件

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);
}​