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

Question

I have a multilayer drop down navigation bar, which, upon hover opens a menu of subcategories. Upon hovering over these subcategories a further list of subcategories is shown.

Any of the categories, subcategories, and sub-subcategories are supposed to be clickable links, which, when clicked, will show search results for the desired level of detail. i.e. food >>> mexican >>>tacos, One can click on any of the three, to get the desired level of depth in their search.

The problem is, when i click on the subcategories, since they are nested in the parent div, i am also clicking on the parent element.

So if i have:

<ul>
<li onclick="queryfunction()">Category</li>
    <ul>
    <li onclick="queryfunction()">Sub-Category</li>
        <ul>
        <li onclick="queryfunction()">Sub-subCategory</li>
        </ul>
   </ul>
</ul>

Clicking on the bottom category triggers all 3 onclick events.

How can i only trigger the one event i want?

have look at this http://stackoverflow.com/questions/985389/how-can-i-stop-an-onclick-event-from-firing-for-parent-element-when-child-is-cli — Milind Anantwar, Feb 07 '13 at 11:09

score 2 · Accepted Answer · edited May 23 '17 at 12:18

2

This is commonly referred to as 'event bubbling'
You can use event.stopPropagation()
You can read up on the subject Here
Or the near-duplicate How to stop event bubbling on checkbox click

edited May 23 '17 at 12:18

Community

1
1

answered Feb 07 '13 at 11:07

Pankrates

3,074
1
22
28

Thank you for expanding my knowledge base! – user1787489 Feb 07 '13 at 11:08

score 0 · Answer 2 · answered Feb 07 '13 at 11:13

You can pass a type variable for category,sub-category or sub-subcategory with a this variable or can give a class to each level of category, it will help you in that functions also. like

<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>

For using event.stopPropagation() pass a event in that function will solve your problem.

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

2 Answers2