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>
This question is related to
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();
});
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();
});
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();
});
});
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.
Or this:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
return false;
});
});
The simplest solution is to add this CSS to the children:
.your-child {
pointer-events: none;
}
Source: Stackoverflow.com