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）選擇器問題

回答

相關問題