在Microsoft Edge中模拟鼠标事件d3

Question

我正在编写测试并尝试模拟“mousemove”事件。我正在使用的方法适用于Chrome，Firefox，Safari和IE 10＆amp; 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甚至无法读取。

更新

最初我认为指定的坐标完全被忽略了;不是这种情况。现实更奇怪。如果我使用荒谬的高数字，那么我可以让它注册我的元素。但实际数字被认为是关闭屏幕。

例如，如果我的元素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()方法获取这些坐标。