我使用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';
点击活动属性！
答案 0 :(得分：4)
根据Mozilla Development Network：
，点击事件的定义是这样的当用户点击元素时，会引发click事件。点击事件将在 mousedown和mouseup 事件之后发生。 [强调我的]
换句话说，你的'翻转'事件正在快速修改内容，导致你的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?问题。