如何等待点击 canvas

Question

我想在我的程序中加入一个 "pause"。基本上，每次我调用我的 wait() 函数时，在我单击 canvas 之前什么都不会发生。

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

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

Answer 1

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

不要让你的程序 wait/sleep，而是尝试使用事件：

drawrectangle(a, b, c, d);

让我们创建一个函数，当我们检测到点击事件时运行：

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

最后，将您的新函数绑定到 window 的 'click' 事件。您可以选择任何 DOM 元素，而不仅仅是 window.

window.addEventListener('click', customOnClickEvent);

文档

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

关注此 link 以了解有关 '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);

如何等待点击 canvas

How to wait for a click on canvas

html

javascript

mouseevent

wait