javascript - 禁用 HTML 画布上的右键单击上下文菜单？

Question

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

我想我希望有一个类似于 Paint 和 Photoshop 之类的应用程序的系统，您可以在其中选择主色和辅助色，并使用左键单击以使用主色进行绘制，然后单击右键以使用辅助色进行绘制。

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

这可以优雅地禁用吗？我不希望它成为一个只适用于某些浏览器的骇人听闻的解决方案，如果可能的话。

谢谢。

Answer 1

你可以使用这个：

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

请参阅此工作示例！

使用最新的 jQuery：

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

注意：您应该使用比body可能的更窄的东西！

或者没有 jQuery，在画布上应用：

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

---

已编辑

更新了Fiddle 示例以显示上下文菜单仅限于画布而不是图像。

查询

$('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

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

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

Answer 4

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

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

Answer 5

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

如果我相信这个来源： http: //javascript.about.com/library/blnoright.htm这是谷歌对您应该尝试过的查询“javascript disable right click”的第一个结果。

编辑 ：

• 关于画布我不知道该元素，但是您是否尝试 stopPropagation()在函数结束后调用事件元素？
• 或以前在画布标签上的解决方案而不是正文...

Answer 6

为了避免对 Jquery Js 的依赖，我不仅在画布上尝试了 preventDefault 事件，还在其他元素中尝试了此事件。关于我查看此页面的 crossBrowser：Events - Contextmenu。

您可能需要验证返回未定义但它用作演示的项目。

(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/>