css - 覆盖 Canvas "steals"上下文菜单

Question

我试图在非透明 HTML 之上绘制覆盖 Canvas ，但 Canvas “窃取”了上下文菜单。

是否可以通过某种方式忽略 Canvas 的上下文菜单？

制作了一个显示问题的 jsfiddle:http://jsfiddle.net/75x8uwxf/1/

HTML:

<img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />
<canvas id="c" height="200" width="200" />

CSS:

#c { z-index: 1; position:absolute;top:0;left:0; outline: 2px dashed green; }

JS:

var c = document.getElementById("c").getContext("2d");
c.strokeStyle = "salmon";
c.beginPath();
c.lineWidth = 3;
c.moveTo(0, 160);
c.lineTo(150,160);
c.stroke();

如果您在绿色虚线区域内右键单击(场景 A)，您将看到使用了 Canvas 的菜单。如果您在绿色虚线区域外单击(场景 B)，您将获得常规上下文。

我希望它表现得像场景 B，即使您在绿色虚线区域内右键单击也是如此。

这有可能吗？

Answer 1

假设您不需要与canvas 进行任何用户交互，您可以在canvas 元素上使用pointer-events: none; :

var c = document.getElementById("c").getContext("2d");
c.strokeStyle = "salmon";
c.beginPath();
c.lineWidth = 3;
c.moveTo(0, 160);
c.lineTo(150,160);
c.stroke();

#c { z-index: 1; position:absolute;top:0;left:0; outline: 2px dashed green; }

canvas {
    pointer-events: none;
}

<img src="https://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" />
<canvas id="c" height="200" width="200" />