javascript - 嵌套 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>

输出是：

单击第三个元素时的三个警报

单击第二个元素时的两个警报

当我单击第一个元素时发出警报

如何用 jQuery 防止这个？

我需要的是：每次点击任何“LI”元素都会发出一个警报。

Answer 1

使用e.stopPropagation();.

描述：防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

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

Answer 2

因为你有嵌套li元素。点击处理程序适用于所有li元素，包括 parentli的。

您需要停止传播事件泡沫。这样一旦它执行了事件处理程序，它就不会爬上 DOM 树来触发相同的事件。

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