Using JQuery, how do I stop click events propagating up the DOM?

Question

Given the following HTML snippet:

<li class="list">
  <img src="/assets/img/site/arrow_black.png"/>My List Element<span class="star"></span>
</li>

When I bind a click event to the li element and also bind a click event to the .star class, my question is the following:

How do I stop the click event on the li firing when I click on the star?

My JQuery code looks something along the lines of:

$(".list").click(function() {
//do something
}

$(".star").click(function() {
//do something
}

possible duplicate of [Javascript/jQuery Click Element within Element](http://stackoverflow.com/questions/3408138/javascript-jquery-click-element-within-element) — Shawn Chin, Apr 25 '12 at 12:52
and many others, e.g. http://stackoverflow.com/questions/1164213/how-to-stop-event-bubbling-on-checkbox-click and http://stackoverflow.com/questions/3460197/jquery-disabling-click-function-on-parent-element/3460215#3460215 — Shawn Chin, Apr 25 '12 at 12:54

score 10 · Accepted Answer · edited Apr 25 '12 at 12:54

10

See jQuery.stopPropagation()

$(".star").click(function(e) {
    e.stopPropagation();
    // do work
}

edited Apr 25 '12 at 12:54

epascarello

204,599
20
195
236

answered Apr 25 '12 at 12:51

SpYk3HH

22,272
11
70
81

lol, wow thought i'd get that up there first, guess i'm gettin slow in my old age, and ty @RoryMcCrossan – SpYk3HH Apr 25 '12 at 12:51
3

+1 for being the first person to put up an example without an error in it. – Rory McCrossan Apr 25 '12 at 12:51

score 1 · Answer 2 · answered Apr 25 '12 at 12:50

1

Try event.stopPropagation();

$(".star").click(function(event) {
  event.stopPropagation();
  // Do something
}

answered Apr 25 '12 at 12:50

John Conde

217,595
99
455
496

score 0 · Answer 3 · answered Apr 25 '12 at 12:52

0

You need to stop the even propgagation for .star.

http://api.jquery.com/event.stopPropagation/

$(".star").click(function(ev) {
    ev.stopPropagation();
});

answered Apr 25 '12 at 12:52

GillesC

10,647
3
40
55

score 0 · Answer 4 · answered Apr 25 '12 at 12:54

You can use the event delegation ..

Apply the event listener to the ul

document.getElementById("parent-list").addEventListener("click",function(e) {

if(e.target && e.target.nodeName == "LI") {
    var classes = e.target.className.split(" ");

    if(classes) {

      for(var x = 0; x < classes.length; x++) {

        if(classes[x] == "star") { // do your thing
                                  }
                    }
          }
  }
});

});

or just use preventDefault to star class

Using JQuery, how do I stop click events propagating up the DOM?

4 Answers4