javascript - 鼠标右键单击 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 运行时生成的。