jQuery on() stopPropagation 不起作用？

Question

我似乎无法让它停止传播..

  $(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

Answer 1

由于您在 body 元素上使用 on，而不是直接在 img.theater 上使用，因此事件将冒泡到 body< /code> 元素，这就是它的工作原理。

在事件冒泡的过程中 .theater-wrapper 元素 click 事件将被触发，以便您看到它。

如果您不创建任何动态元素，则将点击事件处理程序直接附加到 img.theater 元素上。

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

或者，您可以检查 .theater-wrapper 元素 click 处理程序内的 click 事件的目标，而不执行任何操作。

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

Answer 2

使用
event.stopImmediatePropagation()
这对我有用

Answer 3

最好的方法是：

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

它对我来说有手风琴和复选框

Answer 4

回应你的 jsfiddle @Dylan

此处：当您单击白点时，它不应关闭。 jsfiddle.net/Cs8Kq - 迪伦

更改

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

为

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

，它将起作用。

我通过在事件处理程序中使用 console.log(event.target) 并仅使用当我单击您所说的白色区域时注销的选择器来解决此问题。

我本来会发表评论，但我没有足够的星尘和硬币。

编辑：像这样 jsfiddle.net/heNP4/