在React.JS中禁用右键点击

Question

如何在ReactJS中禁用画布的右键单击？以下是我尝试过但仍然不起作用的方法：

let Canvas = <canvas onContextMenu={(e)=>  {e.preventDefault(); return false;}} height={500} width={500} ref="canvas"/>;

浏览器控制台也会显示警告。

警告：从事件处理程序中返回 false 已经过时并将在未来版本中被忽略。相反，根据情况手动调用 e.stopPropagation() 或 e.preventDefault()。

编辑：是的，它停止了 Canvas 上的右键功能，但我的问题是：我在左键单击时要绘制一个点，并且在右键单击时也会绘制该点，我想禁用它。

- Vikramaditya

---

对我来说工作正常 - Brigand

Answer 1

这个JS函数将阻止上下文菜单事件的冒泡，从而防止上下文菜单出现：

canvas.oncontextmenu = function (e) {
    e.preventDefault();
};

- webpopular.net

Answer 2

您可以通过简单地忽略右键点击来防止其实际操作，代码如下：

您可以通过以下方式来忽略右键点击：

handleMouseDown = e => {
  if (e.button === 0)
  {
    // Actions to perform when left mouse button is clicked, like update state
  }
}

let Canvas = <canvas onMouseDown={this.handleMouseDown} ...>;

- Rob Faust