jQuery on() stopPropagation không hoạt động?

Question

tôi dường như không thể có được điều này để ngăn chặn tuyên truyền ..

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

Refer this jsfiddle

Answer 1

Vì bạn đang sử dụng on trên các yếu tố body và không trực tiếp trên img.theater sự kiện đang xảy ra để bong bóng lên đến body và đó là cách nó hoạt động.

Trong quá trình sự kiện bubbling .theater-wrapper yếu tố click sự kiện sẽ được kích hoạt để bạn thấy nó.

Nếu bạn không tạo bất kỳ yếu tố động nào thì hãy đính kèm trình xử lý sự kiện nhấp chuột trực tiếp trên img.theater phần tử.

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

Hoặc bạn có thể kiểm tra các mục tiêu của sự kiện click bên .theater-wrapper yếu tố click xử lý và không làm gì cả.

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

Answer 2

Cách tốt nhất để làm điều đó là:

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

Nó làm việc cho tôi với một accordion và hộp kiểm

Answer 3

Trong respone để jsfiddle bạn @Dylan

đây: Khi bạn nhấp vào điểm trắng, nó không nên đóng. jsfiddle.net/Cs8Kq - Dylan

Thay đổi

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

để

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

và nó sẽ làm việc.

Tôi đã giải quyết vấn đề này bằng cách sử dụng console.log (event.target) trong trình xử lý sự kiện và chỉ sử dụng công cụ chọn đã đăng xuất khi tôi nhấp vào khu vực màu trắng mà bạn đang nói đến.

Tôi đã nhận xét thay vào đó, nhưng tôi không có đủ SO stardust và tiền xu.

EDIT: Như thế này jsfiddle.net/heNP4/