Internet Explorer 11のClickイベントにSVG背景要素がフォーカスを奪う

Question

私は.click()イベントをSVG要素に設定しました。 Internet Explorer 11でクリックすると、背景要素をクリックしていると考えられます。私はz-indexを使用しようとしましたが、運はありません。私はそれが私がクリックしようとしていると考えている要素ログインするためにこれを使用しています：

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

私はちょうどCodePenに私のプロジェクトにリンクしますので、ここで関係する多くのコードがあります：

CodePen Project

を

温度の右側の「F」または「C」の上にマウスを置くと、白くなるはずです。クリックすると、気温が摂氏から華氏に変わります。石老人IE 11でこれらの作業なし... ChromeとFirefoxでうまく

ワークス（驚き）

私の推測では、フォーカスを何かを盗んで作業してから上記のを妨げています。あなたが十分に速ければ、ページを更新した直後にIEで動作させることができます。

乾杯

Answer 1

次は答えよりも、一般的な論評の詳細ですので、私は、事前にappologiseしなければなりません。しかし、私は、あなたがより多くの問題にぶつかるので、注意する価値があると思います。

jQueryを使用してSVGを操作するのは最良の選択ではありません。場合のポイント：FirefoxとIEで

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

、これは読み取り専用のSVGAnimatedLengthの円要素のCX/CY プロパティを変更しようとする試みにつながります。 Firefoxでは、関数が無限ループに陥っているようですが、IEでは回復不能なエラーが発生する可能性があります（テストしていない）。

書き込み可能なプロパティはSVGCircleElement.cx.baseValであり、jQueryはこれを知りません。

クロムでは動作しますが、cxがすでにCSSプロパティ（次のSVG 2 specの一部）として実装されており、SVGCircleElement.style.cxプロパティが存在し、書き込み可能であることが原因です。

HTMLとSVGとSVGの実装の違いについてのこれらの落とし穴はjQueryにとっては未知であり、これらの問題のためにさらに多くのものが期待通りに機能しないと考えています。たとえば、jQueryが.createElementNS()メソッドを使用できないため、SVG名前空間から新しい要素を作成することはできません。

代わりにSVG対応のフレームワークを使用することを真剣に考えてください。しかし、私はそれが多くの仕事を無効にし、現実的な選択肢ではないかもしれないことを知っています。