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

时间:2010-11-13 04:03:02

标签: javascript jquery html css

代码:

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元素)

2 个答案:

答案 0 :(得分:9)

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

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

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

答案 1 :(得分:0)

好吧,我会做这样的事情:

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

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