Javascript 如何在不触发父元素onclick的情况下触发元素的onclick？

我有一个多层下拉导航栏，悬停时打开子类别菜单。将鼠标悬停在这些子类别上时，将显示进一步的子类别列表

任何类别、子类别和子类别都应该是可单击的链接，单击这些链接时，将显示所需详细程度的搜索结果。i、 e.食物>>>墨西哥>>>玉米饼， 您可以单击这三个选项中的任意一个，以获得所需的搜索深度

问题是，当我单击子类别时，因为它们嵌套在父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事件

---

如何只触发一个我想要的事件？

这通常被称为“事件冒泡”
您可以使用

event.stopPropagation（）

你可以仔细阅读这个主题

---

或者接近重复的

您可以将

类别、子类别或子子类别

的

变量与
此
变量一起传递，或者可以将
类别
赋予每一级别的类别，
它也将在这方面帮助您。
像


类别

子类别

子类别




使用
event.stopPropagation（）
在该函数中传递
事件将解决您的问题。
事件冒泡和阶段查看此内容谢谢您扩展我的知识库！
<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>