Question

如何在ReactJS中禁用右键单击画布。这是我尝试过的仍然不起作用。

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

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

警告：不推荐从事件处理程序返回false，将来的版本中将忽略它。而是根据需要手动调用e.stopPropagation（）或e.preventDefault（）。

编辑：是的，它确实停止了Canvas上的右键单击功能，但我的问题是：我在左键单击时画了一个点，而右键单击也是，我想要禁用它。

Answer 1

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

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

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} ...>;

在React.JS

2 个答案: