How to have click event ONLY fire on parent DIV, not children?
JqueryEventsOnclickJquery Problem Overview
I have a DIV with a classed foobar
, and a few DIVs inside that DIV that are unclassed, but I suppose they are inheriting the foobar
class:
$('.foobar').on('click', function() { /*...do stuff...*/ });
I want that to fire off only when clicking somewhere in the DIV but not on its children DIVs.
Jquery Solutions
Solution 1 - Jquery
If the e.target
is the same element as this
, you've not clicked on a descendant.
$('.foobar').on('click', function(e) {
if (e.target !== this)
return;
alert( 'clicked the foobar' );
});
.foobar {
padding: 20px; background: yellow;
}
span {
background: blue; color: white; padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='foobar'> .foobar (alert)
<span>child (no alert)</span>
</div>
Solution 2 - Jquery
There's another way that works if you don't mind only targeting newer browsers. Just add the CSS
pointer-events: none;
to any children of the div you want to capture the click. Here's the support tables
Solution 3 - Jquery
I did not get the accepted answer to work, but this seems to do the trick, at least in vanilla JS.
if(e.target !== e.currentTarget) return;
Solution 4 - Jquery
You can use bubbling in your favor:
$('.foobar').on('click', function(e) {
// do your thing.
}).on('click', 'div', function(e) {
// clicked on descendant div
e.stopPropagation();
});
Solution 5 - Jquery
//bind `click` event handler to the `.foobar` element(s) to do work,
//then find the children of all the `.foobar` element(s)
//and bind a `click` event handler to them that stops the propagation of the event
$('.foobar').on('click', function () { ... }).children().on('click', function (event) {
event.stopPropagation();
//you can also use `return false;` which is the same as `event.preventDefault()` and `event.stopPropagation()` all in one (in a jQuery event handler)
});
This will stop the propagation (bubbling) of the click
event on any of the children element(s) of the .foobar
element(s) so the event won't reach the .foobar
element(s) to fire their event handler(s).
Here is a demo: http://jsfiddle.net/bQQJP/
Solution 6 - Jquery
$(".advanced ul li").live('click',function(e){
if(e.target != this) return;
//code
// this code will execute only when you click to li and not to a child
})
Solution 7 - Jquery
I had the same problem and came up with this solution (based on the other answers)
$( ".newsletter_background" ).click(function(e) {
if (e.target == this) {
$(".newsletter_background").hide();
}
});
Basically it says if the target is the div then run the code otherwise do nothing (don't hide it)
Solution 8 - Jquery
If you can't use pointer-events: none;
and are targeting modern browsers you can use composedPath
to detect a direct click on the object like so:
element.addEventListener("click", function (ev) {
if (ev.composedPath()[0] === this) {
// your code here ...
}
})
You can read more about composedPath here: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
Solution 9 - Jquery
My case is similar but this is occasion when you have few foobar
-s, and you want to close only one - per one click:
Find parent case
$(".foobar-close-button-class").on("click", function () {
$(this).parents('.foobar').fadeOut( 100 );
// 'this' - means that you finding some parent class from '.foobar-close-button-class'
// '.parents' -means that you finding parent class with name '.foobar'
});
Find child case
$(".foobar-close-button-class").on("click", function () {
$(this).child('.foobar-close-button-child-class').fadeOut( 100 );
// 'this' - means that you finding some child class from '.foobar-close-button-class'
// '.child' -means that you finding child class with name '.foobar-close-button-child-class'
});
Solution 10 - Jquery
You can use event.currentTarget. It will do click event only elemnt who got event.
target = e => {
console.log(e.currentTarget);
};
<ul onClick={target} className="folder">
<li>
<p>
<i className="fas fa-folder" />
</p>
</li>
</ul>
Solution 11 - Jquery
// if its li get value
document.getElementById('li').addEventListener("click", function(e) {
if (e.target == this) {
UodateNote(e.target.id);
}
})
function UodateNote(e) {
let nt_id = document.createElement("div");
// append container to duc.
document.body.appendChild(nt_id);
nt_id.id = "hi";
// get conatiner value .
nt_id.innerHTML = e;
// body...
console.log(e);
}
li{
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
width: 380px;
height: 80px;
background-color: silver;
justify-content: center;
align-items: center;
text-align: center;
margin-top: 0.5cm;
border: 2px solid purple;
border-radius: 12%;}
p{
cursor: text;
font-size: 16px;
font-weight: normal;
display: block;
max-width: 370px;
max-height: 40px;
overflow-x: hidden;}
<li id="li"><p>hi</p></li>