Question

I set a event to a wrapper div, but inside this div, i have some buttons, how can i prevent this wrapper event happen in the buttons ?

html:

<div class="wrapper-alert"> <!-- click here will pop-up -->
   <div class="somethingElse"> <!-- click here will pop-up -->
      Some text            
   </div>
   <div class="this-is-my-action">
      <button class="inside-alert">Inside</button> <!-- click here will NOT pop-up-->
   </div>
   <div class="somethingElseTo"> <!-- click here will pop-up -->
      Some text            
   </div>
</div>​

i made a jsfiddle to be more clear.

so, basicly, if i click in the wrapper-alert some message will pop-up, but if i click in the button other thing will happen, the problem is that the buttons are children from wrapper, so 2 events will fire at once.

i have try something with if (e.target !== this) return; but works only with one children, or some basic structure.

Answer 1

You can use stopPropagation method.

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

$(".inside-alert").on("click", function(event){
     event.stopPropagation()
     alert('this is my BUTTON' + event.target); // dont pop-up anything
});