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();
       }); 
  });

обратитесь к этому jsfiddle

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/