jQuery stop "click" action after first elevent

Question

There are two nested elements, both have different click actions.
I need to stop outer element action when inner element is clicked.

HTML:

<div id='out'>
    <div id='in'></div>
</div>

jQuery:

$('#out').click(function(){alert('OUT div is pressed')})
$('#in').click(function(){alert('IN div is pressed')})

I need when in is pressed, only his action is executed. out's script should have no action.

How it can be solved?

Answer 1

You should use stopPropagation():

$('#in').click(function(e){
   alert('IN div is pressed')
   e.stopPropagation();
});

Answer 2

event.stopPropogation() should be able to help you.

Answer 3

I think you should do this:

$('#out').click(function(){alert('OUT div is pressed')})
$('#in').click(function(event){
alert('IN div is pressed');
event.stopPropagation();
}
)

Look here for reference

Answer 4

$('#out').click(function(){
    alert('OUT div is pressed');
});
$('#in').click(function(){
    $('#out').unbind('click');
    alert('IN div is pressed');
});

or you could stop the propagation of the event, but you can't know for sure which event handler will be triggered first (capture vs bubble events) :

$('#in').click(function(e){
    e.stopPropagation();
    alert('IN div is pressed');
});