在 React 中禁用 Firefox 的右键单击上下文菜单

Posted 2023-03-22

【中文标题】在 React 中禁用 Firefox 的右键单击上下文菜单

【英文标题】：Disable Firefox's right click context menu in React

【发布时间】：2019-12-17 08:49:10

【问题描述】：

我正在尝试禁用右键单击特定div 时弹出的上下文菜单。在渲染中我做

<div onContextMenu=(e) => 
    console.log(e); 
    e.preventDefault(); 
    e.stopPropagation(); 
    return false
>

它确实打印了，所以我知道它已连接，但它仍然会在 Firefox ESR 60.8.0 中弹出，即使它在 chrome 中被阻止。

原因：我有一个handsontable，我添加了一个自定义上下文菜单，并且在 Firefox 中，本机上下文菜单呈现在我的顶部。一旦我弄清楚如何在 Firefox 中的任何位置阻止上下文菜单，我会将其应用到自定义渲染器中的 handsontable

编辑：开始赏金是因为没有其他黑客对我有用，这是一个关于罕见版本的 firefox 的非常模糊的案例

【问题讨论】：

This 在当前的 Firefox 版本中为我工作；对你起作用吗？还是您的问题是针对去年的 Firefox 版本？

@Nickolay 这在最新的 firefox 中对我有用，但我刚刚发现我有 ESR 版本的 firefox，它已经在 ESR 的最新版本 60.8.0 上。所以我想我正在寻找旧版本的解决方法。现在我知道我可以在逃跑时关闭它，但我不想让我们的用户这样做

【参考方案1】：

您需要在捕获阶段剪切菜单打开。

document.addEventListener("contextmenu", function(e) 
    if(e.target.id === "YOUR ELEMENT ID")  // identify your element here. You can use e.target.id, or e.target.className, e.target.classList etc...
        e.preventDefault();
        e.stopPropagation();
    
, true) // true means you are executing your function during capture phase

您可以在 componentDidMount 期间或在您的 React 代码之外设置此代码。

【讨论】：

非常接近！这禁用了我的自定义上下文菜单，而原生菜单仍然弹出。也许这比我想象的更适合动手操作......

【参考方案2】：

我刚刚在 Firefox 中测试了这个，ESR 60.8 for Mac 并且它可以工作，你能否再次检查它是否也适合你。

请仔细检查您调用 preventDefault 的事件是否正确，我多次遇到 e 未定义的错误。

我还假设您正在使用标签中的 react 和帖子的语法

class Example extends React.Component 
  render() 
    return (
      <div className="red" onContextMenu=(e) => 
    console.log(e);
    e.preventDefault(); 
    e.stopPropagation(); 
>hello click me</div>
    );
  


ReactDOM.render(
    <Example/>,
    document.getElementById('root')
);

.red
  background: red;
  height: 150px;
  width: 150px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

【讨论】：

是的，我正在使用 react。不幸的是，即使它在 chrome 中工作，这对我在 Firefox 中也不起作用。每次，事件的类型都是“contextmenu”，所以我认为这是正确的事件。防止默认和停止传播不会影响它

但是我刚刚发布的代码对您有用吗？这太奇怪了，因为它确实对我有用……可能是 Mac 还是微软？

没错，它不起作用:(我在 Windows 10 企业版上有 Firefox Quantum 60.8.0esr，不知道该怎么做，但感谢您的尝试

@MarcSlothEastman: 防止默认上下文菜单事件的能力应该由dom.event.contextmenu.enabled 控制，自 2000 年代以来就是true .. 也许尝试使用干净的 Firefox 配置文件？

【参考方案3】：

最后的手段可能是将监听器绑定到元素的ref。

this.handsontableRef.addEventListener('contextmenu', (e)=> 
  e.preventDefault();
  console.log("open your context menu");
);

在 Firefox 中试过这个，为我工作。分享确切的代码，以便我们也可以复制。

【讨论】：

说Uncaught (in promise) TypeError: this.hotTableComponent.current.addEventListener is not a function jsfiddle.net/L892g65r

请正确阅读答案。我说要在 reference 上添加 listener 到您的元素，而不是在 React 组件上添加事件侦听器。无论如何，你在下面得到了答案。

这是你的意思吗？ jsfiddle.net/uo4eL9n8/1 再次，它适用于 chrome 但对我来说不适用于 firefox（向 ref 添加事件侦听器直接给 this.hotTableComponent.addEventListener 不是函数）

您实际上对多个 DOM 元素使用了相同的引用，更新了代码，jsfiddle.net/eb3kwht4。请添加确切的 Firefox 版本，以便我也可以测试它。

啊，好吧，我知道为什么它不允许我将 ref 放在掌上电脑上，只有 div。我的版本是 Windows 10 企业版 Firefox Quantum 60.8.0esr

【参考方案4】：

一位同事帮我解决了这个问题。这是我在工作计算机上预配置的 Firefox 设置的问题。要修复它，我必须在 firefox 中访问 about:config url，并通过双击更改 dom.event.contextmenu.enabled 值。这将其从“修改后的布尔值 false”更改为“默认布尔值 true”。 e.preventDefault() 的预期行为如下