鼠标右键单击 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.j​​s 的 canvas 元素在创建时方便地分配了 p5Canvas 类。我们可以找到具有该类的所有 DOM 元素，并仅阻止这些元素的上下文菜单操作。像这样的事情会做：

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

这样我们就可以避免无法在任何地方打开上下文菜单的挫败感，同时仍然能够定义我们自己的右键单击功能而不触发上下文菜单。

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