Question

我制作了一个绘制盒子的程序，当我单击它时，它会更改颜色并提醒我已单击它。但是警报不会停止。即使我停止点击它，它也一直在提醒我。

代码如下：

function setup() {
    createCanvas(600, 800);
}


function draw() {
    background(170)
    fill(0, 0, 255)
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225){
        fill(0, 0, 155)
    }
    rect(200, 200, 60, 25, 10)
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225 && mouseIsPressed){
        alert("You have pressed a button!")
    }
}

Answer 1

使用mouseClicked功能。

像这样：

function draw() {
    background(170)
    fill(0, 0, 255)
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225){
        fill(0, 0, 155)
    }
    rect(200, 200, 60, 25, 10)
}

function mouseClicked() {
    if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225){
        alert("You have pressed a button!")
    }
}

Answer 2

mouseIsPressed在某些浏览器中存在一些已知问题。为了获得最佳可靠性，请通过更改以下内容使用mousePressed（）：

if(mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225 && mouseIsPressed){
    alert("You have pressed a button!")
  }

对此：

function mousePressed() {
  if (mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225) {
    alert("You have pressed a button!")
    return false
  }
}

mousePressed（）将在每次单击鼠标时触发。

API Reference中提供了更多信息。

由于大约在同一时间发布了另一个答案，所以here是有关使用mousePressed（）和mouseClicked（）的一些信息。

我个人遇到了一些他们提到的问题，可以证明mousePressed（）趋于可靠，并且只有在同时捕获新闻和发布操作至关重要时才使用mouseClicked（）。

Answer 3

其他答案已告诉您要做什么，但他们没有告诉您为什么正在发生。

这是我的理解：

调用alert()函数将阻止其余代码的执行。该代码将停止执行，并且所有交互都将被禁用-例如，您将无法单击链接或按钮。

在P5.js中，这意味着鼠标事件（甚至是简单的事件，例如更新mouseX和mouseY）也将被阻止。

这是您的代码的作用：

显示一个警报对话框，该对话框将阻止所有事件。
用户移动了鼠标，但是此时P5.js不能“看到”他们已经将鼠标从按钮上移开了，因为他们是在显示警报对话框时这样做的。
然后，用户单击“确定”按钮。这会取消暂停您的代码，在您的情况下，它只会再次触发draw()函数。请记住，mouseX和mouseY尚未更新，因此P5.js仍然认为您在按钮上，因此它将再次显示警报对话框。

正如其他答案所建议的那样，您可以使用mouseClicked()或mousePressed()函数而不是检查mouseIsPressed。

function setup() {
    createCanvas(600, 800);
}

function draw() {
    background(170)
    fill(0, 0, 255)
    if (mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225) {
        fill(0, 0, 155)
    }
    rect(200, 200, 60, 25, 10)
}

function mousePressed() {
    if (mouseX > 200 && mouseX < 260 && mouseY > 200 && mouseY < 225) {
        alert("You have pressed a button!")
    }
}

现在，当用户关闭对话框时，draw()函数将继续正常运行并可以处理事件。

运行此代码时，请注意，即使用户关闭对话框，直到他们移动鼠标，按钮仍保持“按下”状态。这是由上述相同的事件取消引起的。

还请注意，警报对话框非常令人讨厌（并且带有类似我们在此处讨论的令人讨厌的副作用），因此最好使用<div>来显示消息或在消息中显示消息自己绘制草图。

p5.js。警报是垃圾邮件

3 个答案:

p5.j​​s。警报是垃圾邮件

3 个答案:

p5.js。警报是垃圾邮件