如何觸發元素的onclick而不觸發父元素onclick？

Question

我有一個多層下拉導航欄，它懸停後打開一個子類別菜單。將鼠標懸停在這些子類別上時，會顯示子類別的更多列表。

任何類別，子類別和子子類別都應該是可點擊的鏈接，點擊後鏈接會顯示所需詳細級別的搜索結果。即食物>>>墨西哥>>>墨西哥捲餅， 人們可以點擊三者中的任何一個，以在他們的搜索中獲得所需的深度。

問題是，當我點擊子類別，因爲它們嵌套在父div中，我也點擊父元素。

所以，如果我有：

<ul> 
<li onclick="queryfunction()">Category</li> 
    <ul> 
    <li onclick="queryfunction()">Sub-Category</li> 
     <ul> 
     <li onclick="queryfunction()">Sub-subCategory</li> 
     </ul> 
    </ul> 
</ul> 

點擊底部的類別觸發所有3個的onclick事件。

我怎樣才能觸發我想要的一個事件？

Answer 1

這通常被稱爲「事件冒泡」
可以使用event.stopPropagation()
您可以在主題讀了Here
或者近複製How to stop event bubbling on checkbox click

Answer 2

您可以通過一個type變量category,sub-category or sub-subcategory與this變量或可以給class到每個級別的類別， 它也會幫助你在那個功能。 像

<ul> 
<li class="category" onclick="queryfunction(this)">Category</li> 
    <ul> 
    <li class="sub-category" onclick="queryfunction(this)">Sub-Category</li> 
     <ul> 
     <li class="sub-subcategory" onclick="queryfunction(this)">Sub-subCategory</li> 
     </ul> 
    </ul> 
</ul> 

對於使用event.stopPropagation()該功能將解決您的問題通過一個event。