html添加鼠标右键菜单,Fabric.js - 添加鼠标右键点击事件响应（附：右键菜单）...

Fabric.js的 Canvas有个mouse:down 事件，通过它我们可以监听到鼠标按下的行为。不过该事件只对鼠标左键其作用，如果是右键按下则不会触发该事件。

而 Canvas上又无法直接监听 contextmenu事件，所以想要实现右键点击响应就需要换种方式实现。

1，实现原理

Fabric.js 的 Canvas初始化完毕后，会自动在其上方覆盖一个 class名为upper-canvas的 canvas。

我们可以在上层这个 canvas上添加 contextmenu事件监听。当右键按下时会触发该事件，然后将点击的坐标转换成底下实际的 canvas里的坐标(坐标需要转换是因为下面 canvas 可能会被移动，缩放)。

2，效果图

默认情况下，鼠标左键点击对象即可选择中该对象。

这里增加个右键选中功能，即通过右键同样可以选中对象。

3，样例代码

canvas {

border: 1px dashed black;

}

var canvas;

window.onload = function() {

canvas = new fabric.Canvas('canvas');

var rect1 = new fabric.Rect({top: 50, left: 50, width: 70, hei