Prevent propagation on inline event element?

Question

Here is my fiddle:

<div id="container" onclick="alert('clicked in container')">
  <div id="div1" >Something inside the other div</div>
</div>


// div1 is added dynamically normally inside the container.
$(document).on('click', '#container #div1', function(e) {
  e.stopPropagation();
  e.stopImmediatePropagation();
 alert('clicked in div1 only');
})

I cannot modify the html part: it was done by someone else.

https://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute — Dan, Nov 04 '19 at 23:22

Michael Beeson · Accepted Answer · 2019-11-05T00:46:39.767

I've come across this problem myself in the past. The problem is that "click" is an amalgamation of two events: mousedown and mouseup. Just change the "click" to "mousedown" and it should work as expected, as you can see in the snippet below (just the same as your code but with the one change).

$(document).on('mousedown', '#container #div1', function(e) {
 e.stopPropagation();
  e.stopImmediatePropagation();
 alert('clicked in div1 only');
})

#container  {
  background-color: red;
  width: 640px;
  height: 640px;
}
#div1 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" onclick="alert('clicked in container')">
  <div id="div1" >Something inside the other div</div>
</div>

----- EDIT -----

I want to point out that I believe this issue is only because of how jQuery .on() works – I think there's a difference between its understanding of "click" and the native click event.

Read this discussion by much cleverer people than myself here:

https://github.com/jquery/jquery/issues/3693

So you could just use a native javascript event handler and the click event propagation is stopped. Or use jQuery event handlers for both divs. I think it's the mix that's causing the issue.

Here's a snippet using just native javascript:

function onDiv1Click(e) {
  e.stopPropagation();
  alert('div 1 clicked');
}

#container  {
  background-color: red;
  width: 640px;
  height: 640px;
}
#div1 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" onclick="alert('clicked in container')">
  <div id="div1" onclick="onDiv1Click(event)">Something inside the other div</div>
</div>

And here using just jQuery

$(document).on('click', '#container', function(e) {
   alert('clicked in container');
})


$(document).on('click', '#container #div1', function(e) {
 e.stopPropagation();
  alert('clicked in div1 only');
});

#container  {
  background-color: red;
  width: 640px;
  height: 640px;
}
#div1 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="div1" >Something inside the other div</div>
</div>

You see both options work

Oh my god this is such a revelation. Here I am creating a bool `var init = true` and setting my code like `$('#blabla').on('click', () => { if(init){ init = false; // then do something } });` to avoid this double trigger bs... wow, this is the reason, huh? — Iskandar Reza, Nov 05 '19 at 00:33
See my edit. You can still use the click event, so long as you're consistent between using native js or jquery. — Michael Beeson, Nov 05 '19 at 00:47

Prevent propagation on inline event element?

1 Answers1