在 React.JS 中禁用右键单击答案

【问题标题】：Disable Right Click in React.JS在 React.JS 中禁用右键单击
【发布时间】：2016-05-04 18:45:23
【问题描述】：

如何在 ReactJS 中禁用画布中的右键单击。这是我尝试过但仍然无法正常工作的方法：

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

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

警告：从事件处理程序返回 false 已被弃用，在未来的版本中将被忽略。相反，请酌情手动调用 e.stopPropagation() 或 e.preventDefault()。

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

【问题讨论】：

Works fine for me

标签： javascript reactjs canvas html5-canvas dom-events

【解决方案1】：

您可以通过忽略它来阻止右键单击实际执行任何操作，如下所示：

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

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

【讨论】：

【解决方案2】：

这个JS函数会防止contextmenu事件冒泡，从而防止context menu出现：

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

【讨论】：