javascript - 点击事件不能正常工作

Question

我用 Html5 canvas 和 Javascript 事件做了一些实验。不幸的是，在某些情况下，javascript click 事件会出现意外行为。

这是实验的 fiddle :http://jsfiddle.net/Rh4kP/10/

当你点击的时候，往往控制台没有任何输出。我在 Google Chrome 22.0.1 和 Firefox 14.0.1

上观察到了这一点

更奇怪的是，当你像这样评论其中一个“翻转”行时:

document.getElementById(hiddenCanvas).style.display = 'block';
// document.getElementById(displayedCanvas).style.display = 'none';

或

// document.getElementById(hiddenCanvas).style.display = 'block';
document.getElementById(displayedCanvas).style.display = 'none';

点击事件正常工作!

Answer 1

点击事件的定义是这样的，根据 Mozilla Development Network :

The click event is raised when the user clicks on an element. The click event will occur after the mousedown and mouseup events. [emphasis mine]

换句话说，您的“翻转”事件触发得如此之快，以至于您的 mousedown 和 mouseup 事件不会发生在同一个 DOM 元素上，因此不会触发点击。

尝试 this example (源自您的)以查看实际效果。您会注意到，当您的 click 事件触发时，mousedown 和 mouseup 事件发生在同一个 DOM 元素上。但如果没有发生，那是因为 mousedown 和 mouseup 发生在不同的 DOM 元素上。另一个要运行的测试是减慢你的触发器。如果超时非常慢，您遇到此问题的机会就会减少(尽管机会仍然存在 - 我建议使用 mouseup)

尝试只使用“mouseup”事件。我用您的示例进行了测试，它似乎一直有效。

参见 If you delete a DOM element, do any events that started with that element continue to bubble?问题以获取更多信息。