$(document).on('click', function() {
if ($(this).is('#clickedElement')) {
console.log('this is clicked');
} else {
console.log('somewhere else clicked');
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><i id="clickedElement"></i></div>
Want to check whether the div is clicked else somewhere is clicked using this way. Really appreciate your help, explain if possible.Thanks <3
CodePudding user response:
Inside a jQuery function
event handler, this
will refer to the element you attached the listener to. Here, it's document
, so that's what this
is.
$(document).on('click', function() {
console.log(this === document);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><i id="clickedElement">click</i></div>
Check if the event.target
(which will point to the element the event was dispatched to - the innermost element) is the clicked element instead.
$(document).on('click', function(e) {
if ($(e.target).is('#clickedElement')) {
console.log('this is clicked');
} else {
console.log('somewhere else clicked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ><i id="clickedElement">click</i></div>