鼠标右键单击p5.js将显示浏览器上下文菜单，而不是绘图功能

Question

我在P5.js:中有这个函数

function mousePressed() {
if (mouseButton === LEFT) {
background(255);
canvas2.clear();
canvas3.clear();
}
if (mouseButton === RIGHT) {
canvas3.clear();
canvas3.fill(0, 0, 0);
canvas3.stroke(0, 0, 0);
canvas3.rect(80, 180, 40, 40);
}
}

而且效果很好，但是。。。。当我单击鼠标右键单击时，会显示浏览器上下文菜单(将图像另存为…、复制图像…、检查Ctrl+Shift+I(。如何禁用或更改行为？

Answer 1

p5.js的canvas元素在创建时方便地为其分配了p5Canvas类。我们可以找到该类的所有DOM元素，并防止仅对这些元素执行上下文菜单操作。像这样的东西就可以了：

function setup() {
for (let element of document.getElementsByClassName("p5Canvas")) {
element.addEventListener("contextmenu", (e) => e.preventDefault());
}
}

通过这种方式，我们避免了无法在任何地方打开上下文菜单的挫折感，同时仍然可以在不触发上下文菜单的情况下定义自己的右键单击功能。

不过，在初始设置之后执行代码是很重要的，因为canvas DOM元素是在p5运行时生成的。

Answer 2

这不是弹出警报，而是浏览器的快捷菜单：要执行的步骤：
防止浏览器的默认行为似乎是个好主意：

document.addEventListener('contextmenu', event => event.preventDefault());

话虽如此：不要这么做。

为什么？因为它只会让用户讨厌。此外，许多浏览器都有一个安全选项，无论如何都不允许禁用右键单击(上下文(菜单。因此，当发出右键点击时，我们会启动其他事件

然后您应该按照以下步骤进行事件发生时设置状态标志：

var rightPressed = false;
function mouseClicked() {
if(mouseButton === RIGHT) {
rightPressed = true;
}
}

处理事件触发的动作时重置标志：

function draw() {
if (rightPressed) {
rightPressed = false
// do somthing
// ...
} 
}

希望这能帮助你

Answer 3

createCanvas()函数返回一个p5.元素，其.elt成员是DOM节点。因此，您可以直接使用@bluelhf的代码：

function setup() {
const canvas = createCanvas(width, height)
canvas.elt.addEventListener("contextmenu", (e) => e.preventDefault())
}