Click事件无法正常运行

Question

我用Html5画布和Javascript事件进行了一些实验 。 不幸的是，在某种情况下，javascript click事件具有意外行为。

这是实验的小提琴： 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开发网络 ，点击事件的定义是这样的：

当用户单击元素时，将引发click事件。 click事件将在mousedown和mouseup事件之后发生。 [强调我的]

换句话说，你的'翻转'事件正在快速修改内容，导致你的mousedown和mouseup事件没有发生在同一个DOM元素上，因此点击不会触发。

试试这个例子 （从你的派生出来）来看看这个实际情况。 您会注意到，当您的click事件触发时，mousedown和mouseup事件发生在同一个DOM元素上。 但是当它没有发生时，这是因为mousedown和mouseup正在不同的DOM元素上发生。 另一个运行测试是减慢你的翻转。 如果超时非常慢，您遇到此问题的可能性就会降低（尽管机会仍然存在 - 我建议使用mouseup ）

请尝试仅使用'mouseup'事件。 我测试了你的例子，它似乎始终有效。

请参阅如果删除DOM元素，那么以该元素开头的任何事件是否继续冒泡？ 有关更多信息的问题。