在 Microsoft Edge for 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 读取的，所以我不能排除 Edge 在 d3.mouse 和鼠标事件之间的交互中存在一些不同。

我尝试过的其他方法包括使用 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() 方法获取这些坐标。