SVG背景元素竊取焦點在Internet Explorer 11中的單擊事件

我已經在SVG元素上設置了一個.click()事件。當我在Internet Explorer 11中單擊它時，它認爲我正在點擊背景元素。我試過使用z-index，但沒有運氣。我使用這個記錄它認爲哪一個元素我試圖點擊：SVG背景元素竊取焦點在Internet Explorer 11中的單擊事件

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

這裏還涉及所以我就鏈接到我的項目在CodePen大量的代碼：

CodePen Project

如果您將鼠標懸停在溫度右側的「F」或「C」上，它應該變成白色。一旦點擊，溫度應該從攝氏變爲華氏。在這些工作的無石老年IE 11 ..

作品只是在Chrome和Firefox（毫無疑問）精細

我的猜測是東西是偷焦點和防止上述從工作。如果您足夠快，您可以在刷新頁面後立即在IE中使用它。

乾杯

來源

2017-11-10 gatzkerob

我要提前appologise，因爲下面是一個多回答一般的評論。但我認爲值得注意，因爲你會遇到更多問題。

這不是使用jQuery來操縱SVG的最佳選擇。點的情況下：

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

在Firefox和IE，這導致一個試圖改變CX/CY的圓元件，這是一個只讀SVGAnimatedLength的屬性。在Firefox中，函數似乎進入無限循環，在IE中它可能會導致不可恢復的錯誤（未經測試）。

可寫屬性將是SVGCircleElement.cx.baseVal，jQuery不知道。

在Chrome中它的工作原理，但只是偶然，因爲CX已經實現爲CSS屬性（即將到來的SVG 2 spec的一部分）和SVGCircleElement.style.cx屬性存在，並且是可寫的。

所有這些關於HTML和SVG和SVG實現怪癖之間的差異的缺陷對於jQuery來說都是未知的，我預計由於這些問題，更多的事情不會按預期工作，有些也在Chrome中。（例如，不能從SVG名稱空間創建新元素，因爲jQuery不能使用.createElementNS()方法。）

我認真考慮建議您使用支持SVG的框架。但後來我知道這會使很多工作失效，可能不是一個現實的選擇。

來源

2017-11-11 00:14:55 ccprog

SVG背景元素竊取焦點在Internet Explorer 11中的單擊事件

回答

相關問題