Question

Consider the following code:

<div id="outer">
    <div id="inner"></div>
</div>

$('#outer').click(function() { alert ("outer"); });
$('#inner').click(function() { alert ("inner"); });

The inner does get called, but the other gets called as well. I want to do an either-or situation. Can you advise on a better way to get around this problem so that I can click my inner div successfully without triggering my outer div click event?

Live example: http://jsfiddle.net/Squ9m/

Answer 1

Use event.stopPropagation():

$('#outer').click(function() { alert ("outer"); });
$('#inner').click(function(event) { event.stopPropagation(); alert ("inner"); });

JS Fiddle demo.

You could also use return false:

$('#outer').click(function() { alert("outer"); });
$('#inner').click(function(event) { alert("inner"); return false; });

JS Fiddle demo.

return false; is the equivalent of using event.stopPropagation() and event.preventDefault(); the first example is useful, then, if you wanted to retain the default function of the element that was clicked, without allowing that event to bubble up the DOM tree.

References:

• event.preventDefault().
• event.stopPropagation().