click event replication

Question

I have this structure

<div>
    <ul>
        <li>...</li>
        <li....
        ...
    </ul>
</div>

and in Jquery

$(div).click(function(){...});
$(li).click(function(){....});

Now my problem is when I click on li, div click event also firing. how can set to only fire li click event when click on li.

possible duplicate of [Prevent execution of parent event handler](http://stackoverflow.com/questions/1398582/prevent-execution-of-parent-event-handler) and [How to prevent a click() event through an internal div to parent div in jQuery?](http://stackoverflow.com/questions/7835775/how-to-prevent-a-click-event-through-an-internal-div-to-parent-div-in-jquery) and [How do I prevent a parent's onclick event from firing when a child anchor is clicked?](http://stackoverflow.com/questions/1369035/how-do-i-prevent-a-parents-onclick-event-from-firing-when-a-child-anchor-is-cli). — Felix Kling, Aug 10 '12 at 10:17

score 3 · Answer 1 · answered Aug 10 '12 at 10:14

3

$(div).click(function(){...});
$(li).click(function(ev){ ev.stopPropagation(); /* other code here */ });

answered Aug 10 '12 at 10:14

Fabrizio Calderan

whats the difference b/w preventdefault and stopPropagation – kirankumar Aug 10 '12 at 10:22
@rajuk see http://api.jquery.com/event.preventDefault/ with `preventDefault` the event still bubbles up the DOM tree – Fabrizio Calderan Aug 10 '12 at 10:23
...see http://jsfiddle.net/wxXc8/ – Fabrizio Calderan Aug 10 '12 at 10:29

score 3 · Accepted Answer · answered Aug 10 '12 at 10:14

3

Do the following:

$(li).click(function(e) {e.stopPropagation()...})

answered Aug 10 '12 at 10:14

DerWaldschrat

score 2 · Answer 3 · answered Aug 10 '12 at 10:14

2

Return false from the lis event, this will stop it bubbling up the DOM tree.

Update, and for good measure do event.preventDefault() too, event being the first argument passed into the handling function.

answered Aug 10 '12 at 10:14

Paystey

score 1 · Answer 4 · answered Aug 10 '12 at 10:15

1

$(li).click(function(event){ event.stopPropagation() });

answered Aug 10 '12 at 10:15

Ahsan Khurshid

score 0 · Answer 5 · answered Aug 10 '12 at 10:15

0

This will help

$(li).click(function(event) {
    event.stopPropagation()
    //you code here
})

answered Aug 10 '12 at 10:15

Om3ga

5 Answers5