Reputation: 24019
I have the following structure (.holder
has a 40px padding so lots of room around element .classA
):
<div class="holder">
<a href="/path/to/file.html" class="classA">Hello</div>
</div>
When a user clicks on .holder
something happens, but I want to stop that click from firing if the user clicks element .classA
This is what I currently use, but I want to say when .holder
is clicked but not .classA
$(document).on('click', '.holder', function() {
modClose();
});
Is that possible?
Upvotes: 0
Views: 54
Reputation: 27022
You can check the target
of the event:
$(document).on('click', '.holder', function(e) {
if (e.target != this) {
console.log('stop');
return;
}
console.log('go');
});
Upvotes: 1
Reputation: 32591
You can check targets className
$(document).on('click', '.holder', function (e) {
if (e.target.className.indexOf('classA') == -1) {
modClose();
}
});
Upvotes: 1
Reputation: 74410
Another way, although similar:
$(document).on('click', '.holder', function(e) {
if($(e.target).hasClass('classA')) return;
modClose();
});
Upvotes: 2
Reputation: 123438
Just stop the event propagation when .classA
is clicked:
$('.classA').on('click', function(evt) {
evt.stopPropagation()
});
$(document).on('click', '.holder', function() {
modClose();
});
From jQuery documentation about stopPropagation:
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Upvotes: 4