javascript - 当鼠标左键按下并在 Chrome 上移动时，Html Canvas 滞后

Question

我创建了一个 Canvas 并向其中添加了鼠标事件:

canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.width = screenWidth;
canvas.height = screenHeight;

... 

// CALLED AT START:
function setup() {
    // Mouse movement:
    document.onmousemove = function(e) {
        e.preventDefault();
        target.x = e.pageX;
        target.y = e.pageY;
        angle = Math.atan2((target.y - localPlayer.getY()),
            (target.x - localPlayer.getX()));
        // Distance to mouse Check:
        var dist = Math.sqrt((localPlayer.getX() - target.x)
            * (localPlayer.getX() - target.x) + (localPlayer.getY() - target.y)
            * (localPlayer.getY() - target.y));
        var speedMult = dist / (canvas.height / 4);
        socket.emit("update", {
            ...
        });
    }
    document.onmousedown = function(e) {
        e.preventDefault();
    }
}

现在的问题是，当我按住唯一的鼠标左键并同时移动鼠标时，我的游戏会延迟很多。简单地移动鼠标不会导致延迟。我已经在 chrome 和 firefox 上测试过了。看来我只能在 chrome 上重现这个问题了。使用鼠标中键或右键在游戏中具有相同的行为并且不会导致延迟。仅当使用鼠标左键时会导致延迟。

我四处寻找答案，发现我应该防止这样的默认行为:

e.preventDefault();

但这并没有解决问题。我还尝试更新屏幕上代表鼠标位置的数字。而且更新正常。只有游戏本身是滞后的。可能是在按住左键时从未调用过 onMouseMoved 吗？但是为什么用中键和右键调用呢？

问题应该出在我在 move 方法内部调用的代码上，因为当我没有按住左键时它工作正常，而且它在 firefox 上工作良好。一定有别的事情发生了。

编辑:我决定在 chrome 上录制一段视频，看看发生了什么。这是结果:

真正奇怪的是，当我按下鼠标中键或右键时，游戏会做同样的事情，但一点都不卡顿。你在做什么 chrome？

编辑:在此处进行测试:www.vertix.io 请注意，并非每个人似乎都能重现此问题。

感谢您的宝贵时间。

Answer 1

当您按住鼠标左键并同时移动它时，您就是在拖动。

编辑:在某些版本的 Chrome 中，有一个错误(当我发布这个答案时我有，现在我没有)，这导致了拖动即使元素没有 draggable 属性也会触发事件。通常，drag 事件应该只来自将 draggable 属性设置为 true 的元素(默认情况下可拖动的图像和 anchor 除外) .

根据MDN ，当 drag 事件被触发时，mouse 事件(例如 mousemove)不会被触发，这意味着您的函数没有被调用。

一个可能的解决方案是对 drag 和 mousemove 事件使用相同的函数:

function mouseMove(e) {
    //do your things here
    ...
}

document.addEventListener('mousemove', mouseMove);

document.addEventListener('drag', mouseMove);

注意:如果您对两个事件使用相同的函数，您应该知道您在函数中使用的事件的哪些属性，因为 drag 和 mousemove 事件。这两个事件不包含完全相同的属性，并且某些属性的行为在两者中可能不同。