Jquery click, how to avoid it from working in inside elements?

Question

<div id="a">
  <div id="b"></div>
</div>

I have a div (a) which needs a jquery click event. I don't want the event to happen when clicking in b (which is nested). Is it possible to prevent this behaviour?

Answer 1

I reckon API you are looking for is : .stoppropagation - http://api.jquery.com/event.stoppropagation/

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Please note for bubble down : jQuery stopPropagation bubble down

Working demo http://jsfiddle.net/3AW29/

Sample code

$( "#a" ).click(function( event ) {
event.stopPropagation();
// Do something
});

Bubble Down Sample

 $(document).ready(function () {

     $("#a").click(function (event) {
         event.stopPropagation();
         if ($(event.target).prop('id') == 'a') 
             alert('t' + $(event.target).prop('id'));
         // Do something
     });
 });