1

多層ドロップダウンナビゲーションバーがあり、ホバーするとサブカテゴリのメニューが開きます。これらのサブカテゴリにカーソルを合わせると、サブカテゴリのさらなるリストが表示されます。

カテゴリ、サブカテゴリ、およびサブサブカテゴリはいずれもクリック可能なリンクであると想定されており、クリックすると、目的の詳細レベルの検索結果が表示されます。つまり、食べ物>>>メキシコ>>>タコス、3つのうちのいずれかをクリックして、検索で必要なレベルの深さを取得できます。

問題は、サブカテゴリをクリックすると、それらが親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イベントがすべてトリガーされます。

必要なイベントを1つだけトリガーするにはどうすればよいですか？

4

2 に答える 2

2

これは一般に「イベントバブリング」と呼ばれます。
使用できます。ここでevent.stopPropagation()
主題について読むことができます。または、チェックボックスをクリックしてイベントバブリングを停止する方法が ほぼ重複しています。

于 2013-02-07T11:07:45.633 に答える
0

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()その関数でパスaを使用eventすると、問題が解決します。

于 2013-02-07T11:13:46.940 に答える