handling touch event with nested elements?

Question

Im having this problem with jquery and the layout of my html.

for example say you have a div element with id "#test" and a child element img with class "nested"

<div id="test">
  <img class="nested" src="example.jpg">
</div>

with Jquery I have two touch events,

$(document).on("click", "#test", function(){
    console.log("clicked on test id");
});

$(document).on("click", ".nested", function(){
    console.log("clicked on nested element");
});

my problem is on the second touch event, when the user clciked on nested item, this will also trigger the first element, because obviously its nested, and i don't want that to happen.

im pretty sure this is a simple problem, but i don't seem to get it.

[event.stopPropagation()](http://api.jquery.com/event.stopPropagation/) — musefan, Aug 21 '13 at 12:45

score 2 · Answer 1 · answered Aug 21 '13 at 12:47

use event.stopPropagation();

 $(document).on("click", "#test", function(){
    console.log("clicked on test id");
});

$(document).on("click", ".nested", function(e){
e.stopPropagation();
    console.log("clicked on nested element");
});

reference event.stopPropagation()

score 0 · Answer 2 · answered Aug 21 '13 at 12:46

0

You need to stop the propagation with event.stopPropagation()

$(document).on("click", ".nested", function(e){
    e.stopPropagation();
    console.log("clicked on nested element");
});

answered Aug 21 '13 at 12:46

adriaanp

2,064
2
22
40

score 0 · Answer 3 · answered Aug 21 '13 at 12:49

Use event.stopPropagation()in the Child element click event:

event.stopPropagation():

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event. add

$(document).on("click", ".nested", function(){
     event.stopPropagation()// prevents the action without notifying the parent
    console.log("clicked on nested element");
});

handling touch event with nested elements?

3 Answers3