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

Question

我正在编写测试并试图模拟“mousemove”事件。我使用的Chrome浏览器，火狐，Safari和IE 10 & 11的工作方法是：

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

myElem.dispatchEvent(e); 

但它不能在边工作。 “mousemove”事件触发并被我的侦听器捕获，但位置不正确。它不使用提供的坐标，而是使用窗口原点0,0。

我的实际代码确实在Edge中运行正常，所以它似乎仅仅是模拟事件的一个问题。但增加的复杂性是这是一个d3图表和鼠标位置正在读取与d3.mouse，所以我不能排除在d3.mouse和鼠标事件之间的交互边缘有不同的东西。

我尝试过的其他方法包括使用CustomEvent和使用PointerEvent，但都似乎触发eventListener，但不能被d3.mouse读取。

UPDATE

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

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

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

我用坐标如：

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

应该把我的光标移到元素，边缘似乎觉得我的光标它是远离屏幕的。如果我输入数字如：

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()方法获得这些坐标。