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

How can one trigger the onclick of an element without triggering the parent element onclick?

本文关键字：元素 onclick 情况下      更新时间：2023-09-26

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

任何类别、子类别和子类别都应该是可点击的链接，点击后，将显示所需详细级别的搜索结果。即食物>>墨西哥>>墨西哥玉米卷，人们可以点击这三个选项中的任何一个，以获得所需的搜索深度。

问题是，当我点击子类别时，由于它们嵌套在父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()
你可以在这里阅读这个主题
或者近乎重复的"如何停止事件冒泡"复选框单击

您可以将category,sub-category or sub-subcategory的type变量与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将解决您的问题。

相关文章：