Question

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

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

但是，在释放鼠标右键后，将显示浏览器中的上下文菜单（查看图像，保存图像，全选）。

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

感谢。

Answer 1

您可以使用此功能：

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

请参阅此working example！

使用最新的jQuery：

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

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

EDITED

更新了Fiddle Example以显示仅限于画布的上下文菜单，而不是图片。

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

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

如果我相信这个来源：http://javascript.about.com/library/blnoright.htm这是谷歌首次查询“javascript禁用右击”的结果，你应该尝试过。

编辑：

关于画布我不知道该元素，但你试着打电话一旦你的功能结束，你会在事件元素上stopPropagation()吗？
或canvas标签上的上一个解决方案而不是正文...

Answer 4

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

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

Answer 5

与其他答案相比，这应该以更现代（更易读）的语法来完成这项工作。

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

Answer 6

为了避免依赖Jquery Js，我不仅尝试了canvas尝试了preventDefault事件，还尝试了其他元素。关于跨浏览器，我查看了以下页面：Events - Contextmenu。

您可能需要验证返回未定义的项目，但这只是一个示例。

<p class="form-row form-row-wide"><input type="hidden" ...></p>

(function(w, d){
	d.body.addEventListener('contextmenu', function(event){
		var blockContext = [
			{ type: 'tag', value: 'canvas'},
			{ type: 'id',  value: 'fooId'},
			{ type: 'tag',  value: 'img'},
		];
		blockContext.map(
			elm => {
				var _elm
				
				if(elm.type == 'tag') _elm = d.querySelector(elm.value);
				if(elm.type == 'id') _elm = d.getElementById(elm.value);

				if(event.target == _elm) event.preventDefault();
			}
		);
	});
})(window, document);

canvas {
background-color: grey;
}

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

6 个答案:

EDITED