onfocus 在 Firefox 中不工作（触发）

Question

有了这个HTML:

<svg width="100" height="100">
  <circle id="circle" cx="50" cy="50" r="50"></circle>
</svg>

和以下 JS:

document.getElementById("circle").onfocus = function(){
    console.log("focused");
}

然后在 Chrome 和 Edge 中，单击（或以其他方式关注）圆圈将 "focused" 记录到控制台。但是，在 Firefox 中没有任何反应。

Here's a JSFiddle 加上代码。

导致此问题的原因是什么以及如何纠正？

Answer 1

为需要触发焦点的元素添加tabindex

<svg width="100" height="100">
  <circle tabindex="0" id="circle" cx="50" cy="50" r="50"></circle>
</svg>

然后

document.getElementById("circle").onfocus = function(){
    console.log("focused");
}