禁用HTML Canvas上的右键单击上下文菜单？

Question

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

我想我想要一个类似于Paint和Photoshop等应用程序的系统,你可以选择主色和二色,然后用左键单击用主色绘画,然后右键单击用二次色绘画.

但是,在释放鼠标右键后,将显示浏览器中的上下文菜单(查看图像,保存图像,全选).

这可以优雅地禁用吗？我不希望它是一个只在可能的情况下才适用于某些浏览器的hackish解决方案.

谢谢.

Answer 1

你可以用这个:

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

看到这个工作示例!

随着最新的jQuery:

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

注意:你应该使用比body可能的更窄的东西!

EDITED

更新了小提琴示例以显示仅限于画布而不是图像的上下文菜单.

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">

Answer 2

试试这个

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

Answer 3

这应该用比其他答案更现代（和可读）的语法来完成这项工作。

const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;

Answer 4

尝试添加oncontextmenu="return false;"body标签.它应该禁用上下文菜单.

如果我相信这个来源:http://javascript.about.com/library/blnoright.htm这是谷歌的第一个结果查询"javascript禁用右键单击",你应该尝试过.

编辑:

• 关于canvas我不知道该元素,但是stopPropagation()一旦你的函数结束,你是否尝试调用 event元素？
• 或者在canvas标签上的先前解决方案而不是正文...

Answer 5

这将禁用画布上的上下文菜单.

<canvas oncontextmenu="return false;"></canvas>