1

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

任何类别、子类别和子子类别都应该是可点击的链接，当点击这些链接时，将显示所需详细级别的搜索结果。ie food >>> mexican >>>tacos，可以点击三个中的任何一个，在搜索中获得所需的深度。

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

我怎样才能只触发我想要的一个事件？

4

2 回答 2

2

这通常被称为“事件冒泡”
您可以使用您可以在此处event.stopPropagation()
阅读主题 或近乎重复的如何在复选框单击时停止事件冒泡

于 2013-02-07T11:07:45.633 回答
0

您可以通过type变量传递变量，也可以为每个级别的类别category,sub-category or sub-subcategory提供变量，它也将帮助您完成这些功能。喜欢thisclass

<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()pass a将解决您的问题。event

于 2013-02-07T11:13:46.940 回答