在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()方法獲得這些座標。