javascript - 子元素上的 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（事件绑定到的项目）是否是事件的目标。试试这个：

http://jsfiddle.net/vtVpP/

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

Answer 2

您必须将 stop stopImmediatePropagation() 应用于子元素。这将停止从子元素传播事件。

$(".circle-child").click(function(e) {
e.stopImmediatePropagation();
})

这是小提琴http://jsfiddle.net/Gnb25/

Answer 3

你可以这样做

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



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

但这仍然会调用子元素并检查目标是否与侦听器相同

Answer 4

您始终可以通过检查 event.target 来检查以确保单击的元素是应有的元素。

$('.circle').click( function(evt) {
    if ( $(evt.target).is('.circle') )
        alert("clicked");
});

这是一个修改后的jsfiddle示例。