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 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?问题。

Click事件无法正常运行

1 个答案: