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

Question

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

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

它确实打印了，所以我知道它是附加的，但它仍然会在 firefox ESR 60.8.0 中弹出，尽管它在 chrome 中被阻止了。

原因:我有一个 handsontable，我向其中添加了自定义上下文菜单，而在 firefox 中， native 上下文菜单呈现在我的顶部。一旦我弄清楚如何在 firefox 中的任何位置阻止上下文菜单，我就会将其应用于自定义渲染器中的 handsontable

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

Answer 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 代码之外设置此代码。