Question

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

任何类别，子类别和子子类别都应该是可点击的链接，单击这些链接时，将显示所需详细程度的搜索结果。即食物＆gt;＆gt;＆gt;墨西哥＆gt;＆gt;＆gt;玉米饼，可以点击三者中的任何一个，以在搜索中获得所需的深度。

问题是，当我点击子类别时，由于它们嵌套在父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将解决您的问题。

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

2 个答案: