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

我正在使用UL LI列表和jQuery创建树。我使用了jQuery SelectorjQuery li：有（ul）选择器问题

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>

来源

2010-05-31 sushil bharwani

你们看到的是事件冒泡。当你点击一个后代元素时，事件也会冒泡到它的祖先。祖先元素上的单击处理程序是被触发的。如果你不想这样做，你还需要停止子元素的点击处理程序中的事件传播，以防止事件冒泡。

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

来源

2010-05-31 14:51:38 tvanfosson

看起来像一个有趣的概念;只需要多一点洞察力，即使在孩子没有定义点击事件时它是如何冒泡的。你可以请建议一个资源，我可以阅读更多关于它 – 2010-05-31 14:58:28

@sushil - 你正在将事件与你正在创建的事件处理程序混淆。事件发生，在这种情况下，当用户单击鼠标时，是否有处理程序来处理它。你正在做的是创建一些将在事件发生时执行的代码。您可以从http://www.quirksmode.org/js/introevents.html或w3schools.com开始：http://www.w3schools.com/jsref/dom_obj_event.asp也是一个很好的参考。 – tvanfosson 2010-05-31 15:04:14

非常感谢这个见解。 – 2010-05-31 15:05:53

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

为了防止cursor属性被继承，你可以添加一个CSS规则，明确设置光标<ul>和<li>元素，像这样：

ul, li { 
    cursor: default; 
}

为了防止点击事件从发射为孩子，你可以检查event.target，像这样：

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

来源

2010-05-31 14:49:51 SLaks

感谢UI元素;它也是inherting点击事件我的意思是我可以点击孩子也切换它是否有相同的解释以及 – 2010-05-31 14:52:29

请你详细说明这一行if（event.target！== this）return;我看到它工作，但没有得到它的确切结果 – 2010-05-31 15:01:01

'e.target'是触发事件的元素。 'this'是你绑定处理程序的元素。 – SLaks 2010-05-31 15:21:25

啊尝试

jQuery('ul',this).css("cursor","hand !important"); .//告诉它光标适用于与“本”即原li元素

来源

2010-05-31 14:52:41 RobertPitt

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

回答

相关问题