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中的单击事件

回答

相关问题