Prevent click in child

Question

I set the event in a wrapper div , but inside this div I have buttons , how can I prevent the wrapper event in 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 jsfiddle to be more clear.

so basically, if I click on wrapper-alert , some message will appear, but if I click on button , another thing will happen, the problem is that the buttons are children from the wrapper, so 2 events will immediately fire.

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

Answer 1

You can use the stopPropagation method.

Prevents the event from the DOM tree bubbles, preventing the notification of the parent handlers about the event.

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