在HTML Canvas上禁用右键上下文菜单？ [英] Disabling right click context menu on a HTML Canvas?

问题描述

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

我想我有一个类似于Paint和Photoshop的应用程序系统，你可以有一个主和辅助

然而，在一个鼠标释放鼠标右键之后，上下文菜单会出现在右键菜单中。浏览器已启动（查看图片，保存图片，全选）。

这是否可以优雅地禁用？我不希望它是一个只在某些浏览器上工作的黑客解决方案。

谢谢。

解决方案

您可以使用此：

  $ 'img'）。bind（'contextmenu'，function（e）{
 return false; 
}）; 
  

查看此工作示例！

使用最新的jQuery：

  $（'body'）。on（'contextmenu'，'img'，function（e）{return false;}）;注意：您应该使用比更窄的字符。    
 
 
  
 
   
更新了小提示示例，以显示上下文菜单仅限于画布而不是图片。
 
 
 
  JQUERY  
  'contextmenu'，'#myCanvas'，function（e）{return false;}）; 
  
  HTML示例 
 < canvas id =myCanvaswidth =200height =100> 
您的浏览器并不支持canvas元素。 
< / canvas> 
 
< img src =http://db.tt/oM60W6cHalt =bubu> 
  
 
Making a painting app using HTML5 and 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.

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.
解决方案
You can use this:
$('img').bind('contextmenu', function(e){
    return false;
}); 
See this working example!

With the lastest jQuery:
$('body').on('contextmenu', 'img', function(e){ return false; });
Note: You should use something narrower than body if possible!



EDITED

Updated the Fiddle Example to show the contextmenu being limited to the canvas and not the image.

JQUERY
$('body').on('contextmenu', '#myCanvas', function(e){ return false; });
HTML EXAMPLE
<canvas id="myCanvas" width="200" height="100">
  Your browser does not support the canvas element.
</canvas>

<img src="http://db.tt/oM60W6cH" alt="bubu">


                        
这篇关于在HTML Canvas上禁用右键上下文菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！