SVG在Firefox和IE11中无法正确接收焦点的元素

我已经创造了这个小提琴，所以你可以为自己看到问题。 如果你给一个元素焦点，任何相关的事件都会触发，但焦点实际上并不在元素上，或者至少它似乎不像tabbing会带你回到元素。 在Chrome上完美运行。

这是jQuery：

$squares = $('a'); $squares.on('focus', function() { $(this).find('rect').attr('opacity', '.2'); }).on('blur', function() { $(this).find('rect').attr('opacity', '1'); }); $squares.eq(2).focus(); 

这里是小提琴： http ： //jsfiddle.net/bigwigal/n3bf8ofe/2/

任何建议将不胜感激。 谢谢。

Answer 1

问题是基本的DOM方法.focus()和.blur() （由JQuery方法在内部使用）没有在表示SVG中元素的SVGAnchorElement接口上定义。

DOM Level 2规范仅定义特定类型的HTML元素（表单元素和锚点）的模糊和焦点方法。

HTML 5规范正在为HTMLElement接口定义这些方法 ，因此HTML命名空间中的任何元素都可以接受键盘焦点。

但是，SVG规范（自HTML5之前的版本以来未进行过大幅更新）不会定义这些方法。

我个人很乐意支持在一般Element接口上定义焦点/模糊方法的建议。 我怀疑这是Chrome在内部实现它的方式。 如果没有发生，希望SVG2规范中会有特定的内容。

它仍然无法解释为什么focus()方法在你的小提琴中触发一个焦点事件，从而引发一个样式改变。 我怀疑JQuery正在捕捉无这样的function错误和直接创建Focus事件的后备，但它对整个文档没有正确的影响。

相比之下，当你试图调用（基本的DOM版本） focus()时，你的小提琴的香草Javascript版本就会出错;这就是我意识到问题是函数不存在的问题！）：

http://jsfiddle.net/n3bf8ofe/5/

 var squares = document.getElementsByTagName('a'); for (var i=0,max=squares.length; i 

不幸的是，我还没有找到解决方法。 Document.activeElement属性是只读的。 （有趣的是，它不是W3 DOM规范的一部分 ，只是HTML5规范的一部分 。）

实际上没有任何其他标准方法可以控制脚本的焦点。 甚至在SVG中也忽略了tabIndex属性（我希望在SVG 2中看到另一个特性 - 或者基本的DOM - 规范！）。

PS，你可能对这个Q＆A感兴趣，关于SVGStyleElement没有HTMLStyleElement的所有function的类似问题 。