javascript - 在 HTML Canvas 上禁用右键单击上下文菜单？

Question

使用 HTML5 和 Canvas 制作绘画应用。

我想我想要一个与 Paint 和 Photoshop 等应用程序类似的系统，您可以在其中选择主要颜色和次要颜色，然后使用左键单击以使用主要颜色进行绘制，右键单击以使用次要颜色进行绘制。

但是，在松开鼠标右键后，会弹出浏览器中的上下文菜单(查看图像、保存图像、全选)。

可以优雅地禁用它吗？我不希望它成为一个只能在某些浏览器上运行(如果可能)的骇人听闻的解决方案。

谢谢。

Answer 1

你可以使用这个:

$('img').bind('contextmenu', function(e){
    return false;
}); 

查看此 working example !

使用最新的 jQuery:

$('body').on('contextmenu', 'img', function(e){ return false; });

注意:如果可能，您应该使用比 body 更窄的内容!

或者不使用 jQuery，在 Canvas 上应用:

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

---

已编辑

更新了 Fiddle Example显示上下文菜单仅限于 Canvas 而不是图像。

JQUERY

$('body').on('contextmenu', '#myCanvas', function(e){ return false; });

HTML 示例

<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

<img src="http://db.tt/oM60W6cH" alt="bubu">