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

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禁用右键单击”你应该尝试过。

编辑：

• 关于canvas我不知道该元素，但是一旦你的函数结束，你是否尝试在事件元素上调用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事件。关于crossBrowser，我查看了这个页面：Events - Contextmenu。

您可能需要验证返回undefined的项目，但它可以作为演示。

(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;
}

<canvas></canvas>
<img src="https://via.placeholder.com/200x200"/>
<p id="fooId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget lorem luctus nisi fermentum imperdiet in ac tortor. Vestibulum interdum risus vitae metus finibus pretium. Nullam facilisis lacus nec pellentesque faucibus. In tempus lorem ut mi sodales, vitae scelerisque quam pretium. Duis venenatis enim in nunc laoreet venenatis. Aliquam at magna vitae purus tincidunt posuere. Donec dictum pharetra ipsum, eu auctor lorem aliquet vitae. Donec faucibus metus quis laoreet ultricies. Aliquam aliquet, lectus a tempor tristique, diam sem auctor felis, sed ultrices magna nunc ut sem. Curabitur congue diam lacinia risus sodales luctus. In nec maximus ex. Nulla ultrices diam a erat imperdiet, nec convallis nisl pulvinar. Etiam quis placerat arcu, eu elementum felis. Phasellus lectus massa, faucibus faucibus nibh ut, dignissim tempor neque.
<p/>