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）。如何禁用它或更改其行为？

- GoranRI

Answer 1

在创建时，p5.js的画布元素会自动分配p5Canvas类。我们可以找到所有具有该类的DOM元素，并仅为这些元素阻止上下文菜单操作。类似以下代码：

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

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

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

- bluelhf

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
    // ...
    } 
 }

希望这能帮到你。

- Codebreaker007

---

这个对我有帮助：document.oncontextmenu = function() { return false; } - GoranRI

Answer 3

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

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

- marcusround