jQuery取消绑定或特定父级内的单击事件处理程序

Question

我有3个按钮，所有按钮都有单击事件处理程序。

如果按钮在特定的父项中，则该按钮上不应有任何点击事件。 但是，应该在该特定父级本身存在单击事件。

在下面的代码中，单击.case2的按钮时，我期望警报显示“ case2 parent clicked”，但仍显示警报“ button clicked”。

为什么会这样呢？ 我该如何纠正呢？

谢谢。

  $('.button').on('click', function (e) { alert('button clicked'); e.stopPropagation(); }); $('.case2') .off('click', '.button', function (e) { e.stopPropagation(); }) .on('click', function (e) { alert('case2 parent clicked'); e.stopPropagation(); }); 

 .case1, .case2, .case3 { margin:1em; padding: 1em; background-color: #0b97c4; width: 5em; height:2em; } .button { padding: 1em; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="case1"> <div class="button"></div> </div> <div class="case2"> <div class="button"></div> </div> <div class="case3"> <div class="button"></div> </div> 

Answer 1

在选择器中使用:not 。

 $('.button:not(.case2 .button)').on('click', function (e) { alert('button clicked'); e.stopPropagation(); }); $('.case2').on('click', function (e) { alert('case2 parent clicked'); e.stopPropagation(); }); 

 .case1, .case2, .case3 { margin:1em; padding: 1em; background-color: #0b97c4; width: 5em; height:2em; } .button { padding: 1em; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="case1"> <div class="button"></div> </div> <div class="case2"> <div class="button"></div> </div> <div class="case3"> <div class="button"></div> </div> 

Answer 2

仅作为另一个示例，仅附加处理程序而不关闭它即可。

var buttons = $('.button');
buttons.not('.case2 .button').on('click', function(e) {
    alert('case first');
    e.stopPropagation();
  });
buttons.parents('.case2').on('click', function(e) {
  alert('case2 parent clicked');
  e.stopPropagation();
});

Answer 3

将“ .button”类添加到选择器中：

$(".class2 .button").on("click",function(e){
    alert('button')
    e.stopPropagation()
 })

它应该首先火。