jQuery on() stopPropagation not working?
-
19-04-2021 - |
سؤال
I can't seem to get this to stop propagating..
$(document).ready(function(){
$("body").on("click","img.theater",function(event){
event.stopPropagation();
$('.theater-wrapper').show();
});
// This shouldn't fire if I click inside of the div that's inside of the
// `.theater-wrapper`, which is called `.theater-container`, anything else it should.
$(".theater-wrapper").click(function(event){
$('.theater-wrapper').hide();
});
});
المحلول
Since you are using on
on the body
element and not directly on img.theater
the event is going to bubble up to body
element and that is how it works.
In the course of event bubbling .theater-wrapper
elements click
event will be triggered so you are seeing it.
If you are not creating any dynamic elements then attach the click event handler directly on img.theater
element.
$("img.theater").click(function(event){
event.stopPropagation();
$('.theater-wrapper').show();
});
Alternatively you can check the target of the click
event inside .theater-wrapper
elements click
handler and do nothing.
$(".theater-wrapper").click(function(event){
if ($(event.target).is('img.theater')){
event.stopPropagation();
return;
}
$('.theater-wrapper').hide();
});
نصائح أخرى
The best way to do that is :
$(".theater-wrapper").click(function(event){
if (!$(event.target).is('img.theater')){
$('.theater-wrapper').hide();
}
});
It's working for me with an accordion and checkbox
use event.stopImmediatePropagation() It worked for me
In respone to your jsfiddle @Dylan
Here: When you click the white spot it shouldn't close. jsfiddle.net/Cs8Kq - Dylan
Change
if ($(event.target).is('img.theater')){
to
if ($(event.target).is('.theater-container')){
and it will work.
I solved this by using console.log(event.target) in the event handler and just using the selector that got logged out when I clicked the white area you're speaking of.
I would've commented instead, but I don't have enough SO stardust and coins.
EDIT: Like this jsfiddle.net/heNP4/