子元素上的 JavaScript 事件处理程序

Question

问题是当我在父元素上附加事件处理程序时。它还附加到子元素。那么，如何将事件仅附加到父级。我尝试了 stopPropagation()/stopImmediatePropagation() 但都不起作用。

HTML

<div class="circle">
    <ul class="circle-child">
        <li><a href="#"></a></li>
    </ul>
</div>  

JavaScript

$(".circle").click(function() {
    console.log("clicked");
});

这是 jsfiddle演示。

Answer 1

该事件仅附加到父级。但从逻辑上讲，由于子元素包含在父元素中，因此如果单击子元素，也会单击父元素，并且由于事件冒泡，因此处理程序将被触发。

您可以检查this(事件绑定(bind)到的项目)是否是事件的目标。试试这个:

http://jsfiddle.net/vtVpP/

$(".circle").click(function (e) {
    if (this === e.target) {
        console.log("clicked");
    }
});