jquery-selectors - jQuery李:has(ul) selector issue

Question

我正在使用 UL LI 列表和 jQuery 创建一棵树。我使用了 jQuery 选择器

jQuery(li:has(ul)) 查找所有具有子节点的列表节点，然后向其添加单击事件。

jQuery(li:has(ul)).click(function(event) {

    jQuery(this).children.toggle();
    jQuery(this).css("cursor","hand");

});

这对我有用，但我不明白为什么即使我将鼠标指针指向所选 li 的子级，我也会得到光标手并触发单击事件

<li> Parent // it works here that is fine
<ul>
<li> child1   // it works here i dont understand need explanation
</li>
<li> child2   // it works here i dont understand need explanation
</li>
</ul>
</li>

Answer 1

您所看到的是事件冒泡。当您单击后代元素时，事件也会冒泡到其祖先元素。您在祖先元素上的单击处理程序将被触发。如果您不希望这样做，则还需要在子元素的点击处理程序中停止事件传播，以防止事件冒泡。

jQuery(li:has(ul)).children().find('li').click(function(e) {
    e.stopPropagation();
});