javascript - jquery 取消绑定(bind)或关闭特定父级中的单击事件处理程序

Question

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

如果按钮位于特定父级内，则该按钮上不应有单击事件。相反，点击事件应该存在于该特定的父级别本身。

在下面的代码中，单击 .case2 中的按钮时，我期望警报显示“case2parent 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>