在Microsoft Edge中为d3模拟鼠标事件

Question

我正在编写测试并尝试模拟“ mousemove”事件。 我使用的可在Chrome，Firefox，Safari和IE 10和11中使用的方法是：

var e = new MouseEvent('mousemove',{
    "clientX": 250,
    "clientY": 100,
});

myElem.dispatchEvent(e);

但这在Edge中不起作用。 “ mousemove”事件触发并被我的听众捕获，但位置不正确。 似乎没有使用提供的坐标，而是使用了窗口原点0,0。

我的实际代码确实可以在Edge中正常运行，因此在模拟事件时似乎只是一个问题。 但这增加了复杂性，因为这是针对d3图表的，并且鼠标位置是通过d3.mouse读取的，所以我不能排除d3.mouse与鼠标事件之间的交互作用在Edge中有所不同。

我尝试过的其他方法包括使用CustomEvent和PointerEvent，但两者似乎都触发了eventListener，但d3.mouse甚至无法读取。

UPDATE

最初，我认为完全忽略了指定的坐标； 不是这种情况。 现实更加离奇。 如果我使用高得离谱的数字，那么我可以将其注册到我的元素上。 但是，实数被认为不在屏幕上。

例如，如果我的元素getBoundingClientRect给我：

left: 100,
top: 10,
width: 500,
height: 300

我使用的坐标例如：

var e = new MouseEvent('mousemove',{
    "clientX": 350,
    "clientY": 150,
});

应该将光标放在元素上，Edge似乎认为我的光标离屏幕很远。 相反，如果我输入如下数字：

var e = new MouseEvent('mousemove',{
    "clientX": 100000,
    "clientY": 50000,
});

Edge会认为这已经超出了我的要求。

Answer 1

d3.mouse方法返回鼠标事件相对于图形容器的x，y坐标。 用于模拟鼠标事件的clientX和clientY值提供了鼠标事件相对于当前窗口的x，y坐标。 因此，坐标集不相同。 您可以通过以下方式手动计算与d3.mouse方法相同的坐标值：

 d3MouseX = clientX - rect.left
 d3MouseY = clientY - rect.top

其中rect.left和rect.top是图形对象的边界矩形的坐标。 您可以使用e.target.getBoundingClientRect()方法获取这些坐标。