Trying to wrap my head around the jQuery ".not()" function, and running into a problem. I would like to have the parent div to be "clickable" but if a user clicks on a child element, the script is not called.
$(this).not(children()).click(function(){
$(".example").fadeOut("fast");
});
the html:
<div class="example">
<div>
<p>This content is not affected by clicks.</p>
</div>
</div>
This question is related to
jquery
Here is an example. Green square is parent and yellow square is child element.
Hope that this helps.
var childElementClicked;_x000D_
_x000D_
$("#parentElement").click(function(){_x000D_
_x000D_
$("#childElement").click(function(){_x000D_
childElementClicked = true;_x000D_
});_x000D_
_x000D_
if( childElementClicked != true ) {_x000D_
_x000D_
// It is clicked on parent but not on child._x000D_
// Now do some action that you want._x000D_
alert('Clicked on parent');_x000D_
_x000D_
}else{_x000D_
alert('Clicked on child');_x000D_
}_x000D_
_x000D_
childElementClicked = false;_x000D_
_x000D_
});
_x000D_
#parentElement{_x000D_
width:200px;_x000D_
height:200px;_x000D_
background-color:green;_x000D_
position:relative;_x000D_
}_x000D_
_x000D_
#childElement{_x000D_
margin-top:50px;_x000D_
margin-left:50px;_x000D_
width:100px;_x000D_
height:100px;_x000D_
background-color:yellow;_x000D_
position:absolute;_x000D_
}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<div id="parentElement">_x000D_
<div id="childElement">_x000D_
</div>_x000D_
</div>
_x000D_
I personally would add a click handler to the child element that did nothing but stop the propagation of the click. So it would look something like:
$('.example > div').click(function (e) {
e.stopPropagation();
});
I'm using following markup and had encoutered the same problem:
<ul class="nav">
<li><a href="abc.html">abc</a></li>
<li><a href="def.html">def</a></li>
</ul>
Here I have used the following logic:
$(".nav > li").click(function(e){
if(e.target != this) return; // only continue if the target itself has been clicked
// this section only processes if the .nav > li itself is clicked.
alert("you clicked .nav > li, but not it's children");
});
In terms of the exact question, I can see that working as follows:
$(".example").click(function(e){
if(e.target != this) return; // only continue if the target itself has been clicked
$(".example").fadeOut("fast");
});
or of course the other way around:
$(".example").click(function(e){
if(e.target == this){ // only if the target itself has been clicked
$(".example").fadeOut("fast");
}
});
Hope that helps.
My solution:
jQuery('.foo').on('click',function(event){
if ( !jQuery(event.target).is('.foo *') ) {
// code goes here
}
});
Or you can do also:
$('.example').on('click', function(e) {
if( e.target != this )
return false;
// ... //
});
Source: Stackoverflow.com