如何检查父元素中的单击，但不检查子元素中的单击？

Question

代码：

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 */

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

Answer 1

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

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

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

Answer 2

好吧，我会做这样的事情：

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

虽然这看起来有点难看，但我认为它确保有效。