当左鼠标停止并在Chrome上移动时，Html画布滞后 [英] Html Canvas lag when Left Mouse is down and moving on Chrome

问题描述

我创建了一个画布，我已经添加了鼠标事件：

I have created a canvas and I have added mouse events to it:

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上的问题。使用鼠标中键或右键在游戏中有相同的行为，不会造成滞后。只有当使用鼠标左键导致滞后。

Now the issue is when I hold down the only left mouse button and move the mouse at the same time, my game lags a lot. Simply moving the mouse causes no lag. I have tested this on chrome and on firefox. It seems that I can only recreate the issue on chrome. Using the middle mouse button or right button has the same behaviour in the game and cause no lag. Only when using the left mouse button causes lag.

我已经找到了答案，发现我应该防止默认行为，如：

I have looked around for answers and found that I should prevent default behaviour like so:

e.preventDefault();

但这没有解决问题。我也试图更新一个数字在屏幕上代表鼠标的位置。它正常更新。只有游戏本身滞后。这可能是onMouseMoved从来没有调用，而左按钮按下？但是为什么它用中间和右键来调用？

But that did not resolve the issue. I have also tried to update a number on the screen that represents the mouse position. And it updated normally. Only the game itself was lagging. Could it be that the onMouseMoved is never called whilst the left button is held down? But then why is it called with the middle and right button?

问题应该是代码我调用move方法，因为它工作正常，当我我不按住左键，它在火狐上工作得很好。必须有别的东西。

The issue should be with the code I a calling inside of the move method, because it works fine when I am not holding down the left key, and it works well on firefox. There must be something else going on.

编辑：我决定在chrome上进行录制，看看发生了什么。结果如下：

I decided to a recording on chrome to see what is going on. Here is the result:

真的奇怪，当我按中间的鼠标按钮或右按钮，游戏做同样的事情，但它并没有滞后。你在做什么？

What's really odd, when I press the middle mouse button or the right button, the game does the same thing, but it does not lag at all. What are you doing chrome?

编辑：在这里测试：www.vertix.io注意，并不是每个人似乎都能够重现这个问题。

Test it out here: www.vertix.io note that not everyone seems to be able to reproduce this issue.

感谢您的时间。

推荐答案

鼠标左键并同时移动它，您会拖动。

When you hold down the left mouse button and move it in the same time, you are dragging.

编辑：在某些版本的Chrome中，有一个错误（当我发布此答案我有它，现在我不） ，这导致 drag 事件被触发，即使没有元素具有 draggable 属性。通常， drag 事件应该只来自具有 draggable 属性设置为 true的元素（除了默认情况下可拖动的图片和锚点）。

Edit: In some versions of Chrome, there is a bug (when I posted this answer I had it, now I don't), which causing the drag events to be fired even without the element having the draggable attribute. Normally, drag events should only be fierd from elements which have the draggable attribute set to true (except images and anchors who are drragable by default).

根据 MDN ，当拖动 鼠标事件，例如 mousemove ，不是，这意味着您的函数未被调用。

According to the MDN, when drag events are being fired, mouse events, such as mousemove, are not, which means that your function isn't being called.

一个可能的解决方案是使用相同的函数 drag 和 mousemove events：

A possible solution are to use the same function for both drag and mousemove events:

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

document.addEventListener('mousemove', mouseMove);

document.addEventListener('drag', mouseMove);

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

Note: If you'll use the same function for both events, you should be aware of which properties of the event you're using in the function, because of the difference between the drag and mousemove events. The two events doesn't contains the exact same properties and the behavior of some properties may not be the same in both of them.

这篇关于当左鼠标停止并在Chrome上移动时，Html画布滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！