Clicking children triggers parent

Question

I have found many questions in this regard, but none of the solutions were good for me. I keep experiencing a feature (issue in my case) when I have multiple elements stacked on eachother. I have a dom situation like this.

<div class="body" data-type="body" onclick="foo(this)">
  <div class="container" data-type="container" onclick="foo(this)">
  </div>
</div>

So when I click .body console.log shows correct element. When I click .container both the elements fire onclick event. Is there any way to overcome this? Or is there any possibility to add the listeners otherwise? My pure jquery approach looks like this. Of course when I use pure jquery I have no inline onclick.

function initSelectable(){
  $('*[data-type]:not(.item-wrapper)').unbind('click').bind('click',function(){
    console.log($(this));
  });
}

Thank you for every suggestion and/or answer!

Praveen Kumar Purushothaman · Accepted Answer · 2015-07-15T20:28:06.187

1

Make sure the events are not propagating. Use this:

event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();

In your code:

function initSelectable(){
  $('*[data-type]:not(.item-wrapper)').unbind('click').bind('click',function(event) {
    console.log($(this));
    event.preventDefault();
    event.stopPropagation();
    event.stopImmediatePropagation();
  });
}

edited Jul 15 '15 at 20:28

answered Jul 14 '15 at 15:39

Praveen Kumar Purushothaman

164,888
24
203
252

Downvoters could explain the reason. – Praveen Kumar Purushothaman Jul 14 '15 at 15:39
Well you actually solved this pretty quickly. Now I realize why that didn't work. I actually tried this preventing of everything but on the wrong place. Thanks a lot. Your answer will be marked as solution in 6 minutes from now. – jPO Jul 14 '15 at 15:43
Why not use the .on/.off event handler which are not deprecated? – mplungjan Jul 14 '15 at 15:49
I downvoted because, prior to the edit, you only included the first 3 lines of code (i.e. `event.preventDefault()` etc.) without any regard to the OP's context. My vote's now locked unfortunately. – Jul 15 '15 at 08:17
@JayMee I have faked an edit. You can remove your downvote. – Praveen Kumar Purushothaman Jul 15 '15 at 20:28

Clicking children triggers parent

1 Answers1