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

Use event.stopPropagation().

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

For IE: window.event.cancelBubble = true

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