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);
});

当我点击包含文字li的{{1}}时，会触发点击事件。

但是，当我点击具有文本1- First 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/

根据评论编辑

如何在子元素上触发click事件

3 个答案: