如何在嵌套HTML時控制jQuery事件？

Question

例如：

<ul> 
<li> 
    first element 
    <ul> 
    <li> second element 
     <ul> 
      <li> third element </li> 
     </ul> 
     </li> 
    </ul> 
</li> 
</ul> 

<script> 
$('li').click(function() { 
    alert('hello world!!!'); 
}); 
</script> 

的輸出是：

THREE警報當我單擊第三ELEMENT

兩個警報當我點擊第二元件

一個警報WHEN我點擊第一個元素

如何用jQue預防這是嗎？

我需要的是：一個警報爲每個點擊任何'李'元素。

Answer 1

使用e.stopPropagation();。

說明：冒泡DOM樹，阻止任何父處理程序被通知的事件阻止事件。

$('li').on('click',function(e) 
{ 
    e.stopPropagation(); 
    alert('hello world!!!'); 
}); 

Answer 2

正如你嵌套li元素。點擊處理程序適用於所有li元素，包括父級li的元素。

您需要停止傳播事件泡泡。因此，一旦它執行了事件處理程序，它就不會觸發DOM樹來觸發相同的事件。

$('li').click(function(e) { 
    alert('hello world!!!'); 
    e.stopPropagation(); 
});