javascript - 如何等待 Canvas 上的点击

Question

我想在我的程序中“暂停”。基本上，每次我调用 wait() 函数时，在单击 Canvas 之前不会发生任何事情。

Drawrectangle(a,b,c,d)
waitforclick()
drawrectangle(e,f,g,h)

将绘制第一个矩形，直到单击 Canvas 后才会绘制第二个矩形。感谢您的帮助。

Answer 1

您可能以错误的方式看待这个问题。停止程序可能不是最好的主意，因为您希望尽快执行。 JavaScript 的一大优势是它内置了一个很棒的事件 API。

不要让程序等待/ sleep ，而是尝试使用事件:

drawrectangle(a, b, c, d);

让我们创建一个在检测到点击事件时运行的函数:

function customClickEventHandler(event) {
  drawrectangle(e, f, g, h);
}

最后，将新函数绑定(bind)到窗口的“单击”事件。您可以选择任何 DOM 元素，而不仅仅是窗口。

window.addEventListener('click', customOnClickEvent);

文档

事件API:https://developer.mozilla.org/en/docs/Web/API/Event

点击此链接可了解有关“addEventListener”函数的更多信息: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

更新

如果您想添加多个处理程序，很简单:

function eventHandler1(event) {
  // do something...
}

function eventHandler2(event) {
  // do something else...
}

window.addEventHandler('click', eventHandler1);
window.addEventHandler('click', eventHandler2);