SVG 背景元素窃取 Internet Explorer 11 中点击事件的焦点答案

【问题标题】：SVG background element stealing focus on click event in Internet Explorer 11SVG 背景元素窃取 Internet Explorer 11 中点击事件的焦点
【发布时间】：2018-04-24 05:09:12
【问题描述】：

我在 SVG 元素上设置了 .click() 事件。当我在 Internet Explorer 11 中单击它时，它认为我正在单击背景元素。我试过使用z-index，但没有运气。我正在使用它来记录它认为我正在尝试单击的元素：

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

这里涉及到很多代码，所以我将链接到我在 CodePen 中的项目：

CodePen Project

如果您将鼠标悬停在温度右侧的“F”或“C”上，它应该会变成白色。单击后，温度应从摄氏度变为华氏度。这些都不适用于石器时代的 IE 11..

在 Chrome 和 Firefox 中运行良好（不足为奇）

我的猜测是某些东西正在窃取焦点并阻止上述工作。如果速度够快，刷新页面后可以立即在 IE 中运行。

干杯

【问题讨论】：

标签： jquery internet-explorer svg onclick click

【解决方案1】：

我必须提前道歉，因为以下更多的是一般评论而不是答案。但我觉得还是要小心，因为你会遇到更多的问题。

使用 jQuery 来操作 SVG 并不是最好的选择。以防万一：

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

在 Firefox 和 IE 中，这会导致尝试更改圆形元素的 cx/cy 属性，这是一个只读的SVGAnimatedLength。在 Firefox 中，changeDegFht 函数似乎进入了无限循环，在 IE 中它可能会导致不可恢复的错误（尚未测试）。

可写属性是SVGCircleElement.cx.baseVal，jQuery 不知道。

在 Chrome 中它可以工作，但只是偶然因为 cx 已经实现为 CSS 属性（即将到来的SVG 2 spec 的一部分）并且SVGCircleElement.style.cx 属性存在并且是可写的。

所有这些关于 HTML 和 SVG 之间差异的陷阱以及 SVG 实现的怪癖对于 jQuery 来说都是未知的，我预计由于这些问题，更多的事情不会按预期工作，有些也在 Chrome 中。（例如，您不能从 SVG 命名空间创建新元素，因为 jQuery 无法使用 .createElementNS() 方法。）

我认真考虑建议您改用支持 SVG 的框架。但后来我知道这会使很多工作无效，并且可能不是一个现实的选择。

【讨论】：