Javascript 在HTML画布上禁用右键单击上下文菜单？

使用HTML5和画布制作绘画应用程序

我想我希望有一个类似于Paint和Photoshop这样的应用程序的系统，您可以选择主色和次色，然后使用左键单击以使用主色进行绘制，右键单击以使用次色进行绘制

但是，松开鼠标右键后，浏览器中的关联菜单将打开（查看图像、保存图像、全选）

这可以优雅地禁用吗？我不希望它成为一个只在某些浏览器上工作的黑客解决方案，如果可能的话

---

谢谢。

尝试在body标签上添加

oncontextmenu=“return false；”

。它应该禁用上下文菜单

如果我相信这个来源：这是谷歌对“javascript禁用右键单击”查询的第一个结果，你应该尝试一下

编辑：

• 关于画布我不知道元素，但是你试过打电话吗 函数结束后，是否在事件元素上执行

  stopPropagation（）

• 或者画布标记上的上一个解决方案，而不是正文

---

您可以使用这个：

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

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

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

看这个

使用最新的jQuery:

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

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

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

注意：如果可能，您应该使用比

主体更窄的东西

或不使用jQuery，在画布上应用：

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

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

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


编辑
更新以显示仅限于画布而非图像的上下文菜单

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


您的浏览器不支持画布元素。
试试这个

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

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

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

这应该比其他答案更现代（更可读）的语法

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

为了避免对Jquery Js的依赖，我不仅在canvas中尝试了preventDefault事件，而且在其他元素中也尝试了preventDefault事件。关于交叉浏览器，我查看了此页面：

您可能需要对返回未定义的项进行验证，但它可以作为一个演示


（函数（w，d）{
d、 body.addEventListener（'contextmenu'，函数（事件）{
var blockContext=[
{type:'tag'，value:'canvas'}，
{type:'id'，value:'fooId'}，
{type:'tag'，value:'img'}，
];
blockContext.map(
榆树=>{
瓦尔·厄姆
if（elm.type=='tag'）_elm=d.querySelector（elm.value）；
if（elm.type=='id'）_elm=d.getElementById（elm.value）；
if（event.target==_elm）event.preventDefault（）；
}
);
});
})（窗口、文件）
画布{
背景颜色：灰色；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。在玉米饼中添加发酵剂可以改善饮食。前庭，前庭，前庭，前庭，前庭。设施不完善是一种缺陷。在天妇罗和苏打菜中，节杖是一种生活方式。努克拉奥里特·维内纳蒂斯的杜伊斯·维内纳蒂斯·埃尼姆。在purus tincidunt posuere大酒店的Aliquam。Donec dictum pharetra ipsum，欧盟拍卖人lorem aliquet vitae。多奈克·福西布斯·梅特斯·奎斯·劳里特·尤里西斯。Aliquam aliquet，lectus a Temporal tristique，diam sem auctor felis，sed ultrices magna nunc ut sem。库拉比图尔·康格·迪亚姆·拉齐尼亚·里苏斯·索达莱斯·卢克图斯。在nec maximus ex.Nulla ultrices diam a era imperdiet中，nec convallis nisl pulvinar。埃蒂亚姆·奎斯·普莱拉特·阿库，猫科动物元素。相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择，相位选择。
是的，我试过了，但似乎在整个页面上禁用了右键单击。我只想在这个画布上禁用它。这不能回答问题要求！很明显，他是从一个特定的元素开始的。是的，显然，我编辑了答案。。。添加关于已经尝试过的内容的信息可能会有所帮助。谢谢，这看起来很有希望！这两者之间有什么区别吗？@RyanPeschel，我已经用一个示例更新了答案，说明了对canvas元素的限制，使浏览器
contextmenu
可用于
canvas
下方的图像。没有jQuery:canvas.oncontextmenu=function（e）{e.preventDefault（）；e.stopPropagation（）；}；无法工作，因为正文已获取事件并显示关联菜单。但是，如果您有此画布的自定义上下文菜单，则可以使用此事件。；）在我看来，这应该是公认的答案。清晰、简单、有效。