Javascript 在 HTML Canvas 上禁用右键单击上下文菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10864249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling right click context menu on a HTML Canvas?
提问by Ryan Peschel
Making a painting app using HTML5 and Canvas.
使用 HTML5 和 Canvas 制作绘画应用程序。
I think I want to have a similar system to applications like Paint and Photoshop where you can have a primary and secondary color selected and use left click to paint with the primary color and right click to paint with the secondary color.
我想我想要一个类似于 Paint 和 Photoshop 等应用程序的系统，您可以在其中选择主要和次要颜色，然后使用左键单击以使用主要颜色进行绘制，然后单击右键以使用次要颜色进行绘制。
However, after one releases the right mouse button the context menu in the browser is brought up (view image, save image, select all).
但是，在释放鼠标右键后，会出现浏览器中的上下文菜单（查看图像、保存图像、全选）。
Can this be elegantly disabled? I don't want it to be a hackish solution that only works on some browsers if possible.
这可以优雅地禁用吗？如果可能，我不希望它成为仅适用于某些浏览器的黑客解决方案。
Thanks.
谢谢。
采纳答案by Zuul
You can use this:
你可以使用这个：
$('img').bind('contextmenu', function(e){
return false;
});
See this working example!
看到这个工作示例！
With the lastest jQuery:
使用最新的 jQuery：
$('body').on('contextmenu', 'img', function(e){ return false; });
Note:You should use something narrower than bodyif possible!
注意：您应该使用比body可能的更窄的东西！
EDITED
已编辑
Updated the Fiddle Exampleto show the contextmenu being limited to the canvas and not the image.
更新了小提琴示例以显示上下文菜单仅限于画布而不是图像。
JQUERY
查询
$('body').on('contextmenu', '#myCanvas', function(e){ return false; });
HTML EXAMPLE
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">
回答by Andrew Nodermann
Try this
尝试这个
canvas.oncontextmenu = function (e) {
e.preventDefault();
};
回答by quemeful
This will disable the context menu on the canvas.
这将禁用画布上的上下文菜单。
<canvas oncontextmenu="return false;"></canvas>
回答by borrascador
This should do the job with more modern (and readable) syntax than the other answers.
这应该用比其他答案更现代（和可读）的语法来完成这项工作。
const canvas = document.getElementById('myCanvas');
canvas.oncontextmenu = () => false;
回答by Vinze
Try adding oncontextmenu="return false;"on the body tag. It should disable the context menu.
尝试添加oncontextmenu="return false;"body 标签。它应该禁用上下文菜单。
If I believe this source : http://javascript.about.com/library/blnoright.htmwhich is google's first result to the query "javascript disable right click" that you should have tried.
如果我相信这个来源：http: //javascript.about.com/library/blnoright.htm这是谷歌对您应该尝试过的查询“javascript 禁用右键单击”的第一个结果。
Edit :
编辑 ：
- about canvas I don't know the element, but did you try calling
stopPropagation()on the event element once your function ends ? - or the previous solution on the canvas tag instead of the body...
- 关于画布我不知道该元素，但是您是否尝试
stopPropagation()在函数结束后调用 事件元素？ - 或者以前在画布标签而不是身体上的解决方案......
回答by HarleySG
Avoiding dependence on Jquery Js, I have tried the preventDefault event not only with canvas but also in other elements. Regarding the crossBrowser I reviewed this page: Events - Contextmenu.
为了避免对 Jquery Js 的依赖，我不仅在画布上而且在其他元素中都尝试了 preventDefault 事件。关于 crossBrowser，我查看了此页面：Events - Contextmenu。
You probably need a validation of items that return undefined but it serves as a demonstration.
您可能需要对返回 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/>