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

Question

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

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

外部容器比内部容器大，从而实现模态叠加布局。我想在外部的暴露表面上注册一个单击事件，这将导致两者都被忽略，但如果您单击内部 div，我不希望发生这种情况。

我正在使用 jQuery delegate/stopPropagation，并尝试询问该元素以确保它是外部 div，但无济于事 - 它仍然收到外部事件。我正在考虑在内部 div 之外的点击区域手动启动，但我想知道是否有更优雅的替代方案。

编辑:

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

Answer 1

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

这是一个 fiddle : http://jsfiddle.net/sajjansarkar/fA2sd/1/