如何在子元素上觸發點擊事件

Question

我有以下HTML結構：

<ul>
  <li>
      1- First Level
  </li>
  <li>
        <ul>
         <li>2 - Second Level</li>
       </ul>
 </li>
</ul>

我有以下jQuery

$(document).on('click','li',function(){
  var text = $(this).html();
  alert(text);
});

當我單擊具有文本1- First Level的li ，將觸發click事件。

但是，當我單擊具有文本2- Second Level的子li時，觸發器將在第一個li上觸發（因為它是父級）。

我如何在每個li上觸發click事件，而不管其狀態（父/子）如何？

Answer 1

e.stopPropagation()將是您需要添加的行，因為綁定在子氣泡上的任何事件都將到達父節點，因此其結果是兩個事件都在頁面中發生。

e.stopPropagation()可讓您停止事件以使其上升到DOM中的父元素。

 $(document).on('click','li',function(e){ e.stopPropagation(); // stop the event to bubble up to the parent. var text = $(this).html(); alert(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> 1- First Level </li> <li> <ul> <li>2 - Second Level</li> </ul> </li> </ul> 

Answer 2

您需要使用stopPropagation停止事件傳播：

$(document).on('click','li',function(e){
   e.stopPropagation();
   var text = $(this).html();
   alert(text);
});

Answer 3

嘗試在javascript中添加stopPropagation（）

$(document).on('click','li',function(){
  var text = $(this).html();
  alert(text);
  stopPropagation();
});

這是一個小提琴https://jsfiddle.net/wLwccv7y/1/

根據評論編輯