jquery - 防止子 div 触发事件

Question

我试图防止在用户单击子项或 div 时触发单击事件。

我有

<div class='test'>
   <div class='click1'>
     test 1

    </div>
   <div class='click1'>
     test 2

    </div>

   <div class='click1'>
     test 3

    </div>

</div>

我的jQuery

  $('.test').click(function(e){

      e.stopPropagation(); //doesn't work
     alert('click!')

  })

我需要将单击事件注册到 .test div，并且我不希望在用户单击子 div 时弹出警报。

有没有办法做到这一点？非常感谢！

Answer 1

$('.test').on('click', '*', function(e){
  e.stopPropagation();
});

演示：http: //jsfiddle.net/rD2ua/

编辑

$('.test').children().bind('click', function(e){
  e.stopPropagation();
});

您可以直接绑定到子元素

演示：http: //jsfiddle.net/rD2ua/1/

Answer 2

更新：

$('.test').click(function(e){
     if (e.target.className == 'click1') {
         return false;
     }
})

工作演示：http: //jsfiddle.net/drDMK/

甚至这样：

$('.test').click(function(e){
     if (e.target.className != 'test') {
         return false;
     }
})

工作演示：http: //jsfiddle.net/drDMK/1/

Answer 3

您应该在子级别（即“click1”）捕获单击事件并在那里停止传播。它正在向上传播到其父级（“测试”）。