Internet explorer 移动和更改SVG文本会导致Internet Explorer 11忽略鼠标

我正在用IE 11.0.9600.17280测试这个。如果在SVG区域上移动鼠标时更改文本框，Internet Explorer将停止响应整个页面的鼠标事件（单击、移动），但我仍然可以使用键盘（键入、切换）。我发现恢复鼠标控制的唯一方法是刷新页面。有时即使鼠标不动也会发生这种情况

这是什么原因造成的？有办法解决这个问题吗

var-pt；
$（文档）.ready（函数（）{
pt=document.getElementById（“布局区域”）.createSVGPoint（）；
$（“布局区域”）.mousemove（函数（事件）{
$（“#position”）.html（event.clientX）；
//将x/y转换为SVG位置
pt.x=event.clientX；
pt.y=event.clientY；
var svg=$（“#布局_区域”）[0]
var matrix=pt.matrixTransform（svg.getScreenCTM（）.inverse（））；
var pos_x=矩阵x
var pos_y=矩阵y
$（“#位置”）。追加（
）（“+pos#x.toFixed（3）+”，“+pos#y.toFixed（3）+”）；
document.getElementById（“text1_use”）.setAttribute（“x”，pos_x-200）；
document.getElementById（“text1_use”）.setAttribute（“y”，pos_y-200）；
});
$（“#label_text”）.keyup（函数（）{
document.getElementById（“text1”）.textContent=$（“#label_text”）.val（）.trim（）；
});
});



文本



我想我也有同样的问题，据我所知，这是Windows7下IE11的一个缺陷。在我的例子中，我将单击的SVG元素移动到另一个组中，但同样的事情发生了——此后整个页面没有鼠标事件

我已经尝试了许多解决方法，包括使用setTimeout延迟DOM更改、在DOM的更高级别上处理事件、在更改DOM之前删除click处理程序。还是一样的结果

我真的很想知道你是否能做到这一点。如果我找到一个解决办法，我会告诉你的。
我找到了一个适合我需要的解决办法。问题似乎涉及到在文本更改时光标正好位于文本顶部，因此我在SVG顶部添加了一个不可见的div，并将mousemove事件更改为该div。光标变为指针类型，而不是“文本”类型（I-beam），当文本框更改时，页面不再冻结

以下是工作示例：


var-pt；
$（文档）.ready（函数（）{
pt=document.getElementById（“布局区域”）.createSVGPoint（）；
$（“#封面”）.mousemove（函数（事件）{
$（“#position”）.html（event.clientX）；
//将x/y转换为SVG位置
pt.x=event.clientX；
pt.y=event.clientY；
var svg=$（“#布局_区域”）[0]
var matrix=pt.matrixTransform（svg.getScreenCTM（）.inverse（））；
var pos_x=矩阵x
var pos_y=矩阵y
$（“#位置”）。追加（
）（“+pos#x.toFixed（3）+”，“+pos#y.toFixed（3）+”）；
document.getElementById（“text1_use”）.setAttribute（“x”，pos_x-200）；
document.getElementById（“text1_use”）.setAttribute（“y”，pos_y-200）；
});
$（“#label_text”）.keyup（函数（）{
document.getElementById（“text1”）.textContent=$（“#label_text”）.val（）.trim（）；
});
});



文本




我相信您可能会遇到

我找到的解决方法是在所有
元素上设置
指针事件：none
。在我的例子中，我需要在
元素上处理鼠标事件，因此我将
元素放在它们上面，并将鼠标处理程序附加在那里

遗憾的是，微软似乎永远也无法解决这个问题……
我很高兴我不是唯一一个遇到这个问题的人。如果我快速移动光标并敲击键盘，我的实际代码就会随机出现这个问题。我花了一些时间把它浓缩成我发布的可重复的例子。问题似乎涉及到当文本更改时光标位于文本顶部。我的解决方法是在SVG的顶部添加一个不可见的div，这样从技术上讲，光标就不再位于文本的顶部。请查看我发布的解决方案，以获得一个有效的示例。谢谢你的关注！啊，好主意。我在这里向IE报告了一个bug，并将其缩小到了JSFIDLE:。我的内部工作是使用setInterval在单击20秒后删除$（g）.hide（）对象。改为在另一层中添加新对象。但是你的解决方案会更干净。我试试看。