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

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

 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 2

p5.js' canvas 元素在创建时方便地分配了 p5Canvas class。我们可以找到所有具有 class 的 DOM 元素，并仅针对这些元素阻止上下文菜单操作。这样的事情会做：

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

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

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

Answer 3

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

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

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

p5.js on right mouse click shows the browser context menu and not the drawing function

javascript

mouseevent

p5.js