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 inside of the 
       // `.theater-wrapper`, which is called `.theater-container`, anything else it should.
       $(".theater-wrapper").click(function(event){
           $('.theater-wrapper').hide();
       }); 
  });

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

Ответы

Ответ 1

Поскольку вы используете on в элементе body, а не непосредственно на img.theater, событие будет пузыриться до элемента body, и именно так оно и работает.

В ходе события bubbling .theater-wrapper события click будут запущены, чтобы вы его видели.

Если вы не создаете динамические элементы, присоедините обработчик события click непосредственно к элементу img.theater.

$("img.theater").click(function(event){
    event.stopPropagation();    
    $('.theater-wrapper').show();
});

В качестве альтернативы вы можете проверить цель события click внутри .theater-wrapper элементов click обработчик и ничего не делать.

$(".theater-wrapper").click(function(event){
    if ($(event.target).is('img.theater')){
         event.stopPropagation();
         return;
    }
    $('.theater-wrapper').hide();
});

Ответ 2

Лучший способ сделать это:

$(".theater-wrapper").click(function(event){
    if (!$(event.target).is('img.theater')){
        $('.theater-wrapper').hide();
    }
});

Он работает для меня с помощью аккордеона и флажка

Ответ 3

В ответ на ваш jsfiddle @Dylan

Здесь: Когда вы нажимаете белое пятно, оно не должно закрываться. jsfiddle.net/Cs8Kq - Dylan

Изменить

if ($(event.target).is('img.theater')){

if ($(event.target).is('.theater-container')){

и он будет работать.

Я решил это, используя console.log(event.target) в обработчике событий и просто используя селектор, который вышел из системы, когда я нажал на белую область, о которой вы говорите.

Я бы прокомментировал это вместо этого, но у меня не хватает SO stardust и монеты.

РЕДАКТИРОВАТЬ: Как этот jsfiddle.net/heNP4/