Question

我正在使用UL LI列表和jQuery创建一个树。我使用了jQuery Selector

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

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

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

});

这对我有用，除了我不明白为什么我得到一个光标手和点击事件触发即使我把鼠标指针指向我所选择的孩子的孩子


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

Answer 2

cursor属性和click事件由元素的子元素继承。

为防止继承cursor属性，您可以添加一个明确设置<ul>和<li>元素光标的CSS规则，如下所示：

ul, li {
    cursor: default;
}

为防止点击事件为儿童开火，您可以检查event.target，如下所示：

if (event.target !== this) return;

Answer 3

是的，试试

jQuery('ul',this).css("cursor","hand !important");。//告诉它将光标应用于带有“this”的ul元素，即原始li元素

jQuery li：有（ul）选择器问题

3 个答案: