onfocus nicht funktioniert (Triggerung) in Firefox

Question

Mit diesem HTML:

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

und der folgenden JS:

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

dann in Chrome und Rande, klicken Sie auf (oder auf andere Weise mit Schwerpunkt auf) den Kreis Logs "konzentriert" auf die Konsole. Im Firefox passiert jedoch nichts.

Here's a JSFiddle mit dem Code.

Was verursacht dieses Problem und wie kann es behoben werden?

Answer 1

ein tabindex auf das Element hinzufügen, die Sie Fokus

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

dann

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

auslösen müssen