關於子元素的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

你可以做到這一點

<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 3

你可以總是通過檢查event.target來檢查以確保clicked元素是它應該是的。

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

這裏是一個修改後的jsfiddle例子。

Answer 4

您必須將stop stopImmediatePropagation（）應用於子元素。這將停止從子元素傳播事件。

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

這裏是小提琴http://jsfiddle.net/Gnb25/