防止重叠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/