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

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文档.click().或者,你可以检查一下原始元素是父的事件处理程序中有什么用event.target.