Question

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

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

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

原因：我有一个可操作的操作台，在其中添加了自定义上下文菜单，在firefox中，本机上下文菜单呈现在我的顶部。一旦确定了如何在firefox中的任何地方阻止上下文菜单，我便会将其应用于自定义渲染器中的handontable

编辑：开始赏金，因为其他任何黑客都没有为我工作，这是关于罕见版本的Firefox的相当模糊的案例

Answer 1

我刚刚在firefox（适用于Mac的ESR 60.8）中对其进行了测试，它是否可以正常工作，请您仔细检查一下是否同样适合您。

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

我还假设您使用的是来自标签和帖子语法的反应

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>

Answer 2

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

document.addEventListener("contextmenu", function(e) {
    if(e.target === "YOUR ELEMENT") { // identify your element here, by classname or ID, yes you need to modify e.target.classList | e.target.id... etc.
        e.preventDefault();
        e.stopPropagation();
    }
}, true) // true means you are executing your function during capture phase

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

Answer 3

最后的方法可能是将侦听器绑定到元素的ref上。

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

在Firefox中对此进行了尝试，为我工作。共享确切的代码，以便我们也可以复制自己的代码。

Answer 4

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

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

4 个答案: