How to stop event propagation with inline onclick attribute?

Question

Consider the following:

<div onclick="alert('you clicked the header')" class="header">

  <span onclick="alert('you clicked inside the header');">something inside the header</span>

</div>

How can I make it so that when the user clicks the span, it does not fire the div's click event?

Answer 1

You can use event.stopPropagation() like this:

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

For Internet Explorer, you can use window.event.cancelBubble = true this way:

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">so

Note: You can refer to https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation