2017-11-10 33 views
0

我已經在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中使用它。

乾杯

回答

1

我要提前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的框架。但後來我知道這會使很多工作失效,可能不是一個現實的選擇。

相關問題