如何检查父元素中的点击，而不是子元素中的点击？答案

【问题标题】：How to check for a click in a parent element, but not in the child?如何检查父元素中的点击，而不是子元素中的点击？
【发布时间】：2010-11-13 04:03:02
【问题描述】：

代码：

HTML

<!-- snip -->
<div class="parent" id="parent">
    <div class="child" id="child">
    </div>
</div>
<!-- snip -->

Javascript

/* snip */
$(function () {
    $("#parent").click(function () {
        alert("This dialog should only show up if the parent is clicked.");
    });
});
/* snip */

（这只是实际代码的基本结构......在实际代码中有些东西是不同的，例如child是一个jQuery UI Draggable元素）

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

JavaScript/DOM 事件的工作方式是它们从子级“冒泡”到父级。所以你只需要在子元素处停止它：

$('#child').click(function(event) {
    event.stopPropagation();
});

请参阅jQuery documentation for .click() 了解更多信息。或者，您可以检查父事件处理程序 using event.target 中的原始元素是什么。

【讨论】：

实际上，在 JavaScript 中附加到 DOM 事件有两种类型：capturing 和 bubbling。（注意：链接与链接文本没有直接关系）
@Hello71：我知道。只是捕获不经常使用，因为它在 IE 8 或更低版本中不起作用。 Internet Explorer 确实支持一种称为“鼠标捕获”的有限形式：msdn.microsoft.com/en-us/library/ms536742%28VS.85%29.aspx

【解决方案2】：

好吧，我会这样做：

$("#child").click(function() { });

虽然这看起来有点难看，但我认为它可以保证工作。

【讨论】：