jQuery - *:not() 不排除元素

Question

我的目标是在除<kbd> 和<textarea> 标签之外的所有地方禁用右键单击。我正在使用*:not(kbd,textarea) 排除禁用右键单击-.on('contextmenu', function(e){ e.preventDefault(); });。假设我可以右键单击<kbd> 和<textarea> 标签，但我不能。这很奇怪。

$(document).ready(function(){
  $('*:not(kbd,textarea)').on('contextmenu', function(e){
      e.preventDefault();
  });
});

div {
  width: 170px;
  height: 170px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<kbd>right click me</kbd>
<textarea>right click me</textarea>
can't right click me
</div>

Answer 1

要明确：*:not(kbd,textarea) 工作得很好。问题与浏览器中事件的处理方式有关。

大多数事件都会冒泡，contextmenu does as well。由于<kbd> 和<textarea> 元素在<div> 内，绑定到<div> 的事件处理程序将始终取消contextmenu 事件。

根据您的具体用例，您可以简单地检查事件是否源自元素本身，并仅在这种情况下阻止它：

$(document).ready(function(){
  $('*:not(kbd,textarea)').on('contextmenu', function(e){
      if (this === e.target) {
        e.preventDefault();
      }
  });
});

div {
  width: 170px;
  height: 170px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<kbd>right click me</kbd>
<textarea>right click me</textarea>
can't right click me
</div>

---

但是，不要将处理程序绑定到每个元素，而是使用事件委托。将处理程序绑定到文档的根并检查事件的来源：

$(document).ready(function(){
  $('body').on('contextmenu', function(e){
      if (!$(e.target).is('kbd,textarea')) {
        e.preventDefault();
      }
  });
});

div {
  width: 170px;
  height: 170px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<kbd>right click me</kbd>
<textarea>right click me</textarea>
can't right click me
</div>