如何在 JS 中使用函数关闭和打开右键单击？答案

【问题标题】：How can I turn right click off and on using functions in JS?如何在 JS 中使用函数关闭和打开右键单击？
【发布时间】：2017-02-22 01:33:36
【问题描述】：

我使用以下方法在我的应用程序中禁用了右键单击：

  <body oncontextmenu="return false;">

我有一个启用了拼写检查的 textarea 元素。我希望能够在此字段中右键单击（用于拼写检查），但我希望在应用程序的其他任何地方都禁用右键单击。

我做了以下事情：

  <textarea onfocus="rightclickon()" onblur="rightclickoff()" spellcheck="true"></textarea>

这些是函数：

function rightclickon() {
$('body').prop('oncontextmenu', 'null');
}//end rightclickon
function rightclickoff() {
$('body').prop('oncontextmenu', 'return false');
}//end rightclickoff

我上面的逻辑是，每当用户进入文本区域时，右键单击将被启用，但当他们离开该字段时，它将再次被禁用。这不符合我的预期。

第一部分起作用（当用户进入该字段时启用右键单击）。但是，当该字段离开时，右键单击不会再次被禁用。它只是保持打开状态。

他们是实现我想要的更简单的方法吗？

【问题讨论】：

为什么要禁用右键？
让 HTML 应用更像一个“应用”而不是网站。
禁用浏览器上下文菜单对用户来说很烦人。这样做很少有充分的理由，想要获得某种“感觉”也不是充分的理由。精通技术的用户无论如何都可以绕过它。

标签： javascript jquery html right-click

【解决方案1】：

只需检查事件的起源并据此决定做什么

document.addEventListener('contextmenu', function(e) {
  if (!e.target.matches('textarea')) {
    e.preventDefault()
  }
}, false)

<p>Some paragraph</p>
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

<textarea>Just try right-clicking in here</textarea>
<p>Another paragraph</p>

有关Element.matches的详细信息，请参阅https://developer.mozilla.org/en/docs/Web/API/Element/matches

【讨论】：

有趣的是，如果你在 Firefox 中按住 shift 键，它会在右键单击时显示上下文菜单
完美！正是我想要的。
@MatthewLock 是的，通常有很多方法可以绕过试图阻止右键单击的网站
这永远不应该被实现...有些用户组会因此而讨厌你。无论如何+1
@ChristianGollhardt 同意了。我想将此答案更多地视为确定性事件处理的指南