javascript - Avoid double function calling on overlaying images? -

i have 1 smaller image laying on top of bigger one, , both connected on click jquery function.

my problem when click smaller one, browser first executes function connected smaller one, , executes function connected bigger one.

html:

<div id="outer" style="position: relative; width:200px; height:200px; background:#00f;">     <div id="inner" style="position: absolute; top:100px; left:100px; width:50px; height:50px; background:#0f0;">     </div> </div> 

jquery:

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

or see jfiddle here: http://jsfiddle.net/xmg2t/.

how prevent browser, when click smaller image, executing second function connected bigger image?

you can use event.stoppropagation() stop event bubbling child element it's parent.

event.stoppropagation() - prevents event bubbling dom tree, preventing parent handlers being notified of event.

$('#inner').click(function(event){   event.stoppropagation();   alert('inner'); });