jQuery on () stopPropagation не работает?
Я не могу заставить это прекратить распространение..
$(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();
});
});
3 ответов
если вы используете on
на body
элемент, а не непосредственно на img.theater
событие будет пузыриться до body
элемент, и именно так это работает.
в ходе события пузырясь .theater-wrapper
элементов click
событие будет запущено, так что вы видите его.
если вы не создаете никаких динамических элементов, то прикрепите обработчик событий click непосредственно на img.theater
элемент.
$("img.theater").click(function(event){
event.stopPropagation();
$('.theater-wrapper').show();
});
альтернативно вы можете проверить цель the click
событие внутри .theater-wrapper
элементов click
обработчик и ничего не делать.
$(".theater-wrapper").click(function(event){
if ($(event.target).is('img.theater')){
event.stopPropagation();
return;
}
$('.theater-wrapper').hide();
});
лучший способ сделать это :
$(".theater-wrapper").click(function(event){
if (!$(event.target).is('img.theater')){
$('.theater-wrapper').hide();
}
});
он работает для меня с аккордеоном и флажком
в ответ на ваш jsfiddle @Dylan
здесь: когда вы нажимаете белое пятно, оно не должно закрываться. jsfiddle.net/Cs8Kq - Дилан
изменить
if ($(event.target).is('img.theater')){
to
if ($(event.target).is('.theater-container')){
и оно будет работать.
Я решил это с помощью консоли.событие журнала.target) в обработчике событий и просто с помощью селектора, который вышел из системы, когда я щелкнул белую область, о которой вы говорите.
Я бы вместо этого прокомментировал, но у меня недостаточно звездной пыли и монет.
EDIT: как это jsfiddle.net/heNP4/