Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in Web Technology by (20.3k points)

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?

1 Answer

0 votes
by (40.7k points)

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 

Browse Categories

...