谷歌浏览器重复触发JavaScript的“focus”事件

Question

我注意到Chrome处理javascript焦点事件的方式存在奇怪的问题。事实上，即使只出现一次，它也会不断触发焦点事件。我在这里做了一些研究，并找到了一些人在使用alert()时遇到相同问题的问题。当他们关闭警报窗口时，焦点返回到他们的输入框，并且处理程序会再次触发。在我的情况下，问题是不同的，因为我正在使用console.log()，有时我会得到相同的日志2或3次。我注意到通常发生在我清除控制台，然后聚焦在一个元素上。当我尝试重复它时，不再发生。

场景如下：

1.清除控制台 2.聚焦在元素上（2或3个控制台消息） 3.聚焦在其他相同的元素上或取消聚焦并再次聚焦在相同的元素上（没有问题） 4.清除控制台 5.聚焦在元素上（2或3个控制台消息-问题回来了！）

我创建了一个jsfiddle，请查看： http://jsfiddle.net/ffuWT/3/ 问题是，这个问题的原因是什么，我该如何解决？

- noname

---

对我来说，使用Chrome 17.0.963.78 m运行时，它的表现符合预期（不是你所描述的方式）。 - m90

我无法重现您的问题，也不明白在＃4中清除控制台会如何导致事件触发两次的问题？您是否尝试在函数中阻止事件冒泡？请尝试添加e.stopPropagation()。 - Rory McCrossan

我能够重现这个问题。e.stopPropagation 对我来说并不能解决它。 - Ben Lee

实际上，我无法重现这个问题。我能够创建一个类似的问题：将焦点集中在一个元素上。然后按alt-tab键切换到另一个窗口（触发4个或更多的焦点事件），然后再按alt-tab键返回（触发2个或更多的焦点事件）。 - Ben Lee

@RoryMcCrossan 是的，我已经尝试过了 - 但没有成功。 - noname

Answer 1

这些事情发生起来真是令人毛骨悚然。今天在工作中我遇到了与这个问题完全相同的情况，但我很快就将其归咎于第三方插件（jQuery customInput）中可疑的事件监听和传播。明天我会仔细检查你的 jsfiddle。

在我的当前设置下（Mac 上的 Chrome v17），我无法完全重现你的输出，但我有一个理论要分享。在你的场景和 Ben Lee 的评论中，一贯的部分是将焦点转移到另一个窗口（在你的情况下是控制台）。

请查看 "Window + focusable element" 下的 http://www.quirksmode.org/dom/events/blurfocus.html：

如果在聚焦于可聚焦元素时将窗口向后发送，则应在两者上触发模糊事件。如果将窗口再次带回前台，则应在两者上触发聚焦事件。

接下来，在兼容性表中指出：

Safari Windows 会触发两个聚焦事件。

也许 Chrome 最终也拥有了这个 "功能"，因为它也来自 Webkit 家族？

- Oleg

---

谢谢，你的答案是正确的，链接也很有用。我决定选择Stefan的答案，因为他给了我关于这个问题（或者如果你愿意，只是不同的行为）原因的精确和正确的信息，而你只是发表了你的理论。实际上，这是正确的，所以还是+1。 - noname

@noname：省去了我需要再次核对的麻烦 :) - Oleg

Answer 2

我能够通过你提供的 jsFiddle 重新现出这个问题，据我所见，只有在你在结果框中没有焦点的情况下点击 select 才会出现这个问题。

在你点击展开其中一个 select 之前先点击框内，而不是点击 select，那么你只会看到一行记录。

你还可以在 jsFiddle 的 URL 后面添加 /show 来查看单独窗口中的结果。

似乎是通过点击 select 控件来聚焦窗口会多次触发事件。

打开这个演示并取消浏览器窗口的焦点（通过点击桌面、任务栏或另一个窗口），然后单击其中一个 select 来展开其选项并查看控制台。

使用 Chrome 17.0.963.79 m。

- Stefan