jquery stop child triggering parent event
JqueryJquery Problem Overview
I have a div which I have attached an onclick
event to. in this div there is a tag with a link. When I click the link the onclick
event from the div is also triggered. How can i disable this so that if the link is clicked on the div onclick
is not fired?
script:
$(document).ready(function(){
$(".header").bind("click", function(){
$(this).children(".children").toggle();
});
})
html code:
<div class="header">
<a href="link.html">some link</a>
<ul class="children">
<li>some list</li>
</ul>
</div>
Jquery Solutions
Solution 1 - Jquery
Do this:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
e.stopPropagation();
});
});
If you want to read more on .stopPropagation(), look here.
Solution 2 - Jquery
Or, rather than having an extra event handler to prevent another handler, you can use the Event Object argument passed to your click event handler to determine whether a child was clicked. target
will be the clicked element and currentTarget
will be the .header div:
$(".header").click(function(e){
//Do nothing if .header was not directly clicked
if(e.target !== e.currentTarget) return;
$(this).children(".children").toggle();
});
Solution 3 - Jquery
Better way by using on() with chaining like,
$(document).ready(function(){
$(".header").on('click',function(){
$(this).children(".children").toggle();
}).on('click','a',function(e) {
e.stopPropagation();
});
});
Solution 4 - Jquery
I stumbled upon this question, looking for another answer.
I wanted to prevent all children from triggering the parent.
JavaScript:
document.getElementById("parent").addEventListener("click", function (e) {
if (this !== event.target) return;
// Do something
});
jQuery:
$("#parent").click(function () {
// Do something
}).children().on("click", function (e) {
e.stopPropagation();
});
Solution 5 - Jquery
The answers here took the OP's question too literally. How can these answers be expanded into a scenario where there are MANY child elements, not just a single <a>
tag? Here's one way.
Let's say you have a photo gallery with a blacked out background and the photos centered in the browser. When you click the black background (but not anything inside of it) you want the overlay to close.
Here's some possible HTML:
<div class="gallery" style="background: black">
<div class="contents"> <!-- Let's say this div is 50% wide and centered -->
<h1>Awesome Photos</h1>
<img src="img1.jpg"><br>
<img src="img2.jpg"><br>
<img src="img3.jpg"><br>
<img src="img4.jpg"><br>
<img src="img5.jpg">
</div>
</div>
And here's how the JavaScript would work:
$('.gallery').click(
function()
{
$(this).hide();
}
);
$('.gallery > .contents').click(
function(e) {
e.stopPropagation();
}
);
This will stop the click events from elements inside .contents
from every research .gallery
so the gallery will close only when you click in the faded black background area, but not when you click in the content area. This can be applied to many different scenarios.
Solution 6 - Jquery
The simplest solution is to add this CSS to the children:
.your-child {
pointer-events: none;
}
Solution 7 - Jquery
Or this:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
return false;
});
});