javascript - 鼠标拖动事件有 Y 坐标跳跃/间隙

Question

为什么拖动事件中有间隙？

这是工作示例：https ://svelte.dev/repl/e62f83d69cea4fda9e8a897f50b5a67c?version=3.31.1

*注意：REPL 中的 console.logs 本身会减慢事件的速度，因此可能不会引起注意。

我得到以下日志：

dragstart 78

drag 64    <--------- how does this happen?

drag 81
drag 82
drag 83
drag 84

drag 0
dragend 0

on:dragstart={(e) => {
    mouseYCoordinate = e.clientY;
    console.log('dragstart', mouseYCoordinate);
}}

on:drag={(e) => {
    mouseYCoordinate = e.clientY;
    console.log('drag', mouseYCoordinate);
}}

on:dragend={(e) => {
    console.log('dragend', mouseYCoordinate);
    console.log('\n');
}}

此间隙会导致项目闪烁。

标签： javascriptdomeventsmouseeventsvelte