Question

我已经创造了这个小提琴，所以你可以为自己看到问题。如果你给一个元素焦点，任何相关的事件都会触发，但焦点实际上并不在元素上，或者至少它似乎不像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方法在内部使用）未在SVGA中定义<a>元素的SVGAnchorElement接口上定义。

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

正在进行的HTML 5规范define these methods for the HTMLElement interface，因此HTML命名空间中的任何元素都可以接受键盘焦点。

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

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

它仍然无法解释为什么focus()方法会触发焦点事件，从而导致风格改变。我怀疑JQuery正在捕获无这样的功能错误和直接创建Focus事件的后备，但它对整个文档没有正确的影响。

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

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属性是只读的。（有趣的是，not part of the W3 DOM specs只有HTML5 specs。）

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

P.S。，您可能对this Q&A, about similar problems with the SVGStyleElement not having all the functionality of an HTMLStyleElement感兴趣。

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

1 个答案: