使用 WebGL 上下文阻止画布中的右键单击答案

【问题标题】：Block right clicks in canvas with WebGL context使用 WebGL 上下文阻止画布中的右键单击
【发布时间】：2012-01-12 07:14:54
【问题描述】：

我想停止在 HTML5 画布上显示上下文菜单的鼠标右键，因为它会妨碍鼠标控制的游戏。

我尝试将oncontextmenu="return false;" 添加到canvas 标记属性。这在画布使用 2D 上下文时有效，但在 Firefox 和 Chrome 中使用 WebGL 上下文时不。

这是标准以某种方式指定的还是两个同时存在的浏览器错误？有没有办法解决这个问题并阻止 WebGL 上下文中的右键单击？

【问题讨论】：

您需要使用旧的右键单击处理程序（e.preventDefault()、e.stopPropagation()）来完成
既然这真的不是 WebGL 问题，为什么不将问题编辑为更通用的内容，例如“阻止浏览器中的右键单击”或“阻止浏览器中的上下文菜单”？只是一个想法。

标签： javascript html canvas webgl

【解决方案1】：

结果可能因浏览器而异，因此请确保这适用于所有目标浏览器。我只在 Chrome 中尝试过。

  yourCanvas.addEventListener('contextmenu', function(e) {
      if (e.button === 2) {
       e.preventDefault();
        return false;
      }
  }, false);

工作示例：http://jsfiddle.net/cK9Rt/

（它会在控制台中显示“测试”，但不会创建上下文菜单）

【讨论】：

我在 Chrome 15 上尝试过，但它根本不起作用。该函数似乎从未被调用过。
另外构造怎么样了？看到你关于 HN 的最新帖子。我很想知道事情的进展以及你们两个面临什么样的问题。
嗯，这很奇怪，您的 jsfiddle 代码有效，但当我将其粘贴到我的代码中时却无效。我会玩一玩的。 Construct 进展顺利，如果你愿意，可以去论坛打个招呼:)
优秀文章：Stop Misusing Return False.

【解决方案2】：

我在阻止默认浏览器操作时使用以下代码

element.onevent=function(e){
    e.preventDefault();
    return false;
}

此代码绝对确保不会发生默认操作

永远不要使用 html 属性来阻止默认值。

当我看到你的问题时，我在相同的情况下尝试了这个：

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

它完全按照它应该的方式工作。

我希望这可以帮助这个问题的任何未来观众

【讨论】：