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.
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With