jquery unbind或off特定父级中的click事件处理程序

Question

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

如果某个按钮位于特定父级内，则该按钮上不应有任何点击事件。但是，在该特定父级别本身应该存在单击事件。

在下面的代码中，点击.case2中的按钮，我希望警告显示＆＃34; case2父母点击＆＃34;，但它仍会显示警告＆＃34;按钮点击＆＃ 34。

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

感谢。

＆＃13;

＆＃13;

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

＆＃13;

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

.button {
  padding: 1em;
  background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

添加＆＃34; .button＆＃34;选择器的类：

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

然后首先开火。