当鼠标左键按下并在 Chrome 上移动时，Html Canvas 延迟 [英] Html Canvas lag when Left Mouse is down and moving on Chrome

问题描述

我已经创建了一个画布，并在其中添加了鼠标事件:

canvas = document.getElementById('canvas');context = canvas.getContext('2d');canvas.width = screenWidth;canvas.height = 屏幕高度；...//开始时调用:功能设置(){//鼠标移动:document.onmousemove = 函数(e){e.preventDefault();target.x = e.pageX;target.y = e.pageY;角度 = Math.atan2((target.y - localPlayer.getY()),(target.x - localPlayer.getX()));//鼠标距离检查: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("更新", {...});}document.onmousedown = 函数(e){e.preventDefault();}}

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

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

e.preventDefault();

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

问题应该出在我在 move 方法内部调用的代码上，因为当我没有按住左键时它可以正常工作，并且它在 Firefox 上运行良好.一定有其他事情发生.

我决定在 chrome 上录音，看看发生了什么.结果如下:

真正奇怪的是，当我按下鼠标中键或右键时，游戏会做同样的事情，但完全没有延迟.你在做什么 chrome?

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

感谢您的宝贵时间.

解决方案

当您按住鼠标左键并同时移动时，您是拖动.

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

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

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

function mouseMove(e) {//在这里做你的事情...}document.addEventListener('mousemove', mouseMove);document.addEventListener('drag', mouseMove);

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

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();
    }
}

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();

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?

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.

EDIT: 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?

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

Thank you for your time.

解决方案

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

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).

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.

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);

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 Canvas 延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！