SVG元素无法在Firefox和IE11中正确接收焦点 [英] SVG a element not receiving focus correctly in Firefox and IE11

问题描述

我已经创建了这个小提琴，所以您可以自己看到问题.如果您将焦点放在元素上，则将触发所有相关事件，但是焦点实际上并没有在元素上，或者至少看起来似乎不是，因为通过制表键可以使您重新浏览元素.在Chrome上完美运行.

I've created a fiddle of this one so you can see the problem for yourselves. If you give an element focus, any associated events will fire but the focus isn't actually on the element, or at least it doesn't seem to be as tabbing takes you back through the elements. Works perfectly on 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/

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

Any advice would be much appreciated. Thanks.

推荐答案

问题是在SVGAnchorElement接口上未定义基本DOM方法.focus()和.blur()(由JQuery方法在内部使用).表示SVG中的<a>元素.

The problem is that the basic DOM methods .focus() and .blur() (which are used internally by the JQuery methods) are not defined on the SVGAnchorElement interface that represents <a> elements in SVG.

DOM 2级规范仅定义了模糊和将方法重点放在特定类型的HTML元素(表单元素和锚点)上.

The DOM Level 2 specifications only define the blur and focus methods on specific types of HTML elements (form elements and anchors).

HTML 5规范进行中

The HTML 5 specs-in-progress define these methods for the HTMLElement interface, so any element in the HTML namespace can conceivably receive keyboard focus.

但是，SVG规范(自HTML5之前的日子以来未进行重大更新)并未定义这些方法.

However, the SVG specs (which haven't been significantly updated since pre-HTML5 days), do not define those methods.

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

I personally would happily back a proposal to have the focus/blur methods defined on the general Element interface. I suspect this is how Chrome implements it internally. If that doesn't happen, hopefully there will be something specific in the SVG2 specs.

它仍然不能解释为什么focus()方法触发小提琴中的焦点事件，从而触发样式更改.我怀疑JQuery会捕获到没有此类功能的错误，并作为直接创建Focus事件的后备方式，但是它对整个文档没有适当的作用.

It still doesn't explain why the focus() method is triggering a focus event, and therefore a style change, in your fiddle. I suspect that JQuery is catching the no-such-function error and as a fallback creating the Focus event directly, but it's not having the proper effect on the document as a whole.

相反，小提琴的原始Javascript版本在尝试调用focus()的基本DOM版本时会出错(这就是我意识到问题在于该函数不存在的原因！):

In contrast, a vanilla Javascript version of your fiddle simply errors out when trying to call (the basic DOM version of) focus() (this is how I realized that the problem was that the function didn't exist!):

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

var squares = document.getElementsByTagName('a');

for (var i=0,max=squares.length; i<max; i++) {
    var square = squares[i];
    square.addEventListener('focus', function() {
        this.setAttribute('opacity', '.2');
    }, square);
    square.addEventListener('blur', function() {
        this.setAttribute('opacity', '1');
    }, square);
}

try {
    squares[2].focus();
}catch(e){ console.log("Error! ", e); }

不幸的是，我一直无法找出解决方法. Document.activeElement属性是只读的. (有趣的是，不是W3 DOM规范的一部分，只是 HTML5规范.)

Unfortunately, I haven't been able to figure out a workaround. The Document.activeElement property is read-only. (And interestingly, is not part of the W3 DOM specs, only the HTML5 specs.)

确实没有其他标准方法可以控制脚本的焦点.甚至tabIndex属性在SVG中也被忽略(我想在SVG 2中看到的另一个功能-或基本DOM-规格！).

There really isn't any other standard way of controlling focus from scripts. Even the tabIndex attribute is ignored in SVG (another feature I'd like to see in the SVG 2 -- or the basic DOM -- specs!).

PS，您可能会对此问题与解答感兴趣，该问题涉及SVGStyleElement的某些问题，这些问题没有HTMLStyleElement的所有功能.

这篇关于SVG元素无法在Firefox和IE11中正确接收焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！