SVG-Hintergrundelement stehlen Fokus auf Click-Ereignis in Internet Explorer 11

Question

Ich habe ein .click() Ereignis auf einem SVG-Element festgelegt. Wenn ich im Internet Explorer 11 darauf klicke, denke ich, dass ich auf ein Hintergrundelement klicke. Ich habe versucht mit z-index aber kein Glück. Ich verwende dieses, welches Element einzuloggen es denkt, dass ich versuche zu klicken:

$(document).click(function(e){ 
    console.log(e.target) 
}) 

eine Menge Code hier beteiligt Es gibt also werde ich einfach in CodePen zu meinem Projekt verlinken:

CodePen Project

Wenn Sie die Maus über "F" oder "C" auf der rechten Seite der Temperatur bewegen, sollte es weiß werden. Nach dem Klicken sollte sich die Temperatur von Celsius auf Fahrenheit ändern. Keines dieser Arbeit in Stein im Alter von IE 11 ..

funktioniert gut in Chrome und Firefox (keine Überraschung)

Meine Vermutung ist, etwas Fokus stiehlt und die oben verhindert arbeiten. Wenn Sie schnell genug sind, können Sie es sofort nach dem Aktualisieren der Seite im Internet Explorer starten.

Prost

Answer 1

Ich habe im Voraus neuen ausprobieren, da die folgenden eher einen allgemeinen Kommentars als eine Antwort ist. Aber ich denke, es ist es wert, zu warnen, weil Sie auf mehr Probleme stoßen werden.

Es ist nicht die beste Wahl, jQuery zu verwenden, um SVG zu manipulieren. Punkt bei:

$('.weather-degfht-indicator').animate({ 
    cx: cx, 
    cy: cy 
},500) 

In Firefox und IE, führt dies zu einem Versuch, die cx/cy Eigenschaft eines Kreises Element zu ändern, die eine schreibgeschützt ist SVGAnimatedLength. In Firefox scheint die Funktion in eine Endlosschleife zu gehen, in IE könnte es zu einem nicht behebbaren Fehler führen (habe es nicht getestet).

Die beschreibbare Eigenschaft wäre SVGCircleElement.cx.baseVal, von der jQuery nichts weiß.

In Chrome funktioniert es, aber nur nebenbei, weil Cx bereits als CSS-Eigenschaft implementiert ist (ein Teil der kommenden SVG 2 spec) und die SVGCircleElement.style.cx -Eigenschaft existiert und beschreibbar ist.

All diese Fallstricke bezüglich der Unterschiede zwischen HTML und SVG und SVG-Implementationsquirks sind jQuery unbekannt, und ich erwarte, dass mehr Dinge aufgrund dieser Probleme nicht wie erwartet funktionieren, einige auch in Chrome. (Sie können z. B. keine neuen Elemente aus dem SVG-Namespace erstellen, da jQuery die Methode .createElementNS() nicht verwenden kann.)

Ich würde Ihnen ernsthaft empfehlen, stattdessen ein SVG-fähiges Framework zu verwenden. aber dann weiß ich, dass es eine Menge Arbeit ungültig machen würde und möglicherweise keine realistische Option wäre.