javascript - click events on nested list items each with their own click handler - Stack Overflow

admin管理员组

文章数量:1287882

I have nested unordered lists and click handlers on each li element. When clicking on a nested li, it's firing both events. Is there anyway to prevent this behavior?

<ul>
    <li>thundercats
        <ul>
            <li>panthero</li>
            <li>cheetarah</li>
        </ul>
    </li>
</ul>

So in the above list clicking "thundercats" would fire one event setting a value to "thundercats", clicking on panthero would fire another event setting a value to panthero.

Unfortunately clicking panthero causes the value to be set properly for an instant and then the click handler on thundercats fires and overwrites the value. Is there a way to prevent that?

I have nested unordered lists and click handlers on each li element. When clicking on a nested li, it's firing both events. Is there anyway to prevent this behavior?

<ul>
    <li>thundercats
        <ul>
            <li>panthero</li>
            <li>cheetarah</li>
        </ul>
    </li>
</ul>

So in the above list clicking "thundercats" would fire one event setting a value to "thundercats", clicking on panthero would fire another event setting a value to panthero.

Unfortunately clicking panthero causes the value to be set properly for an instant and then the click handler on thundercats fires and overwrites the value. Is there a way to prevent that?

• javascript
• jquery

Share Improve this question Follow edited Sep 29, 2011 at 19:27 lonesomeday 238k5353 gold badges327327 silver badges328328 bronze badges asked Sep 29, 2011 at 19:21 tad604tad604 33611 gold badge55 silver badges1818 bronze badges 1

• Can you post your code? It sounds like you need to prevent propagation up the DOM. – Ted Kalaw Commented Sep 29, 2011 at 19:24

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 10

One option is to prevent the event bubbling up the DOM tree. This will work, but it's not optimal because sometimes event bubbling is very useful. It's nicer to check to see if the event originated on the correct element:

$('li').click(function(event) {
    if (this === event.target) {
        // do your code
    }
});

This code works because this and event.target both point to DOM elements. this is the element where the event handler is handled (where the code is run) while event.target is the element where the event originated, i.e. the element that was clicked. If they are the same element, the event was triggered on the same element as where it is being handled; this is where you want the code to be run, and nowhere else. Comparing the elements with === acplishes this.

You need to use event.stopPropagation. This will keep the click event from bubbling up the DOM tree.

$(document).ready( function () {
   $('li').click(function (evt) {
     // Your code here

     // Stop the event propagation
     evt.stopPropagation();
   })
});

It should be as simple as adding:

return false;

...to your event handler function.

When an event handler returns false, it stops event propagation (it's effectively the same as calling .preventDefault() and .stopPropagation() on the event object). It'd definitely be helpful to see your code, but it sounds like this will do it.

本文标签： javascriptclick events on nested list items each with their own click handlerStack Overflow