谷歌浏览器JavaScript链接漏洞

Question

在谷歌浏览器中，当单击链接时，焦点事件无法触发。所有其他浏览器都会为链接触发焦点事件。

<a href=# onfocus="console.log('focus')">Link</a>

我不想在mousedown上附加事件，而是在focus上。有没有绕过的办法。

编辑：

我肯定认为这是一个错误，因为所有其他可聚焦元素都会在单击时触发焦点。

即使是具有tabindex的非可聚焦元素在Google Chrome中也会在单击时触发焦点。

<div tabindex="-1" onfocus="console.log('focus')">div</div>

我不能同时绑定click和focus，因为在onclick时，其他浏览器会调用该函数两次。我不能检测此功能，因为它需要用户交互，并且我不会进行用户代理字符串检测，因为这样做是错误的。

使用以下html：

<a href=# onfocus="console.log('focus')" onmousedown="console.log('mousedown')">Link</a>

是否有办法使第二个 onmousedown 调用失效，以防止在非谷歌浏览器中函数被调用两次。

编辑2：

经过进一步测试，<input type=radio> 在谷歌浏览器中也无法调用焦点。 为什么谷歌浏览器会这样，而 Opera、IE 和 Firefox 都没问题。令人惊讶的是，当我在 Android 设备上测试时，移动 WebKit 浏览器甚至会触发链接的焦点。

- Lime

---

使用“tab”键进行检查：http://jsfiddle.net/82QXv/1/ - Jared Farrish

@Heandel - 我不确定，但看起来是这样。 - Jared Farrish

@Heandel @Jared 是的，我会将连续聚焦警报问题标记为错误。 最初我只使用了警报，结果不得不强制退出谷歌浏览器。 - Lime

@Jared和OP：在这里提交了一个bug报告（http://code.google.com/p/chromium/issues/detail?id=86724）。 - user703016

@Heandel - 我添加了一个关于alert()关联动作的注释。此外，“triggering”是正确的拼写... ;) - Jared Farrish

Answer 1

这个方法其实很有效，但是如果只是点击链接的话，焦点事件并不会被触发（尝试使用Tab键，你会发现事件被触发了）。我认为这不是一个bug，为什么不简单地进行安全防护并同时使用呢？

- John Leidegren

---

+1. Webkit只有在用户使用键盘时才会触发事件。 - Kenan Banks

@Triptych - 我只是想知道，为什么？W3C似乎认为“指向设备”触发焦点是可以的：http://www.w3.org/TR/html4/interact/scripts.html#adef-onfocus - Jared Farrish

我编辑了我的帖子，进一步解释了问题以及为什么应该将其归档为错误。 - Lime

@Triptych：那不是真的。如果链接具有“tabindex”，Webkit将为鼠标事件触发该事件。http://jsfiddle.net/7JzjT/ - Matthew

Answer 2

你可以采取一种解决方法，避免在工作浏览器上弹出双重 focus 事件，同时仍然能够在 Chrome 上弹出 focus 事件。方法是在点击事件中检查页面上是否有任何元素获得了 focus，如果没有，则触发 focus 事件。

使用 jQuery 可以这样实现：

$('a').click(function(e){
     if(!$('*:focus').length) $(this).trigger('focus');         
});

例子：http://jsfiddle.net/niklasvh/qmcUt/

- Niklas

---

有趣的是，当触发onmousedown或onclick时，document.activeElement似乎指的是document.body，因为对于Google Chrome浏览器来说，该元素实际上从未获得焦点。http://jsfiddle.net/qmcUt/36/ 另外，我将点击事件切换为mousedown，这样它就可以在大多数浏览器触发focus时触发了。 - Lime

Answer 3

你可以使用小技巧：

<a href="#" onfocus="console.log('focus')" onclick="this.focus()">Link</a>

- Alexander Ruliov