在React.js中禁用右键点击？

Question

我有一个元素，想通过禁用鼠标右键来防止其被下载。

<iframe src={TEST + "#toolbar=0"} width="100%" height="800px" 
onMouseDown={(e)=>e.preventDefault()} onContextMenu={(e)=>e.preventDefault()}/> 

很不幸，当我右键点击时，仍然会弹出上下文菜单。有什么想法吗？

- Kayla Song

---

这个回答解决了你的问题吗？在React.JS中禁用右键单击 - Zzirconium

不，我已经看过了，但它不起作用。 - Kayla Song

好的，也许这是因为您正在尝试从iframe中绑定事件。请参考https://dev59.com/HV0a5IYBdhLWcg3wYXy8#30399256 - Zzirconium

Answer 1

如果您正在使用hooks，那么可以通过以下方式停止右键单击选项

useEffect(() => {
        const handleContextmenu = e => {
            e.preventDefault()
        }
        document.addEventListener('contextmenu', handleContextmenu)
        return function cleanup() {
            document.removeEventListener('contextmenu', handleContextmenu)
        }
}, [ ])

- KARTHIKEYAN.A

Answer 2

在你的组件的componentDidMount()方法中使用contextmenu事件。

例如：

componentDidMount() {
  document.addEventListener('contextmenu', (e) => {
    e.preventDefault();
  });
};

这将防止上下文菜单的显示。

- Mohammed-yassin HAMDAOUI

---

这还是没用。我认为iframe可能无法检测到任何点击，因为在iframe中将onClick函数绑定到控制台日志不会打印任何内容。有什么办法可以解决这个问题吗？ - Kayla Song

请查看此链接，您将找到答案：https://dev59.com/XHLYa4cB1Zd3GeqPaKIi - Mohammed-yassin HAMDAOUI