Question

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

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？但是为什么用中间和右键调用呢？

问题应该是我在移动方法中调用的代码，因为当我没有按住左键时它工作正常，并且它在firefox上运行良好。必须有其他事情发生。

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

As you can see, I have highlighted the areas where I press the left button.

真的很奇怪，当我按下鼠标中键或右键时，游戏会做同样的事情，但它根本没有延迟。你在做什么铬？

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

感谢您的时间。

Answer 1

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

修改：在某些版本的Chrome中，存在一个错误（当我发布此答案时，我已经拥有它，现在我不知道），导致drag个事件即使没有具有draggable属性的元素也要被解雇。通常情况下，drag事件应该只从draggable属性设置为true的元素中挑选出来（默认情况下图像和锚点是可加工的）。

根据MDN，当drag事件被触发时，mouse事件（例如mousemove）不会发生，这意味着您的功能不是{＆＃39}。被召唤。

可能的解决方案是对drag和mousemove事件使用相同的功能：

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

document.addEventListener('mousemove', mouseMove);

document.addEventListener('drag', mouseMove);

注意：如果您对两个事件使用相同的功能，您应该知道您在该功能中使用的事件的哪些属性，因为差异drag和mousemove事件之间。这两个事件不包含完全相同的属性，并且两个事件的行为在两个事件中的行为可能不同。

Answer 2

您在文档上有鼠标事件。由于我们无法看到您对文档的内容，因此很难知道这是否是导致问题的原因。

尝试仅将鼠标事件移动到画布上，因为这是我认为你需要它的唯一地方。如果文档不是游戏的一部分，则没有点处理文档的事件，如果子元素附加了事件，则文档在列表中是最后一个。他们先走，然后再冒泡到你的身上。

因为看起来你正在使用某种类型的框架，所以有可能是另一种鼠标事件监听器，它是框架工作的一部分，可能会因为没有阻止默认而减慢你的速度。您将不得不搜索框架以查看它是否有任何鼠标事件的监听器。

使用addEventListener而不是通过.onmousedown = eventHandler来直接附加活动例如canvas.addEventListener("mousedown",eventHandler);

将事件监听器添加到您需要的元素，而不是文档。

Answer 3

你考虑过限制吗？

查看https://blog.toggl.com/2013/02/increasing-perceived-performance-with-_throttle/

Answer 4

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

 document.onmousemove = mouseMove;

  document.ondrag = function(e) {
mouseMove(e);
//do another things
...
}

左鼠标停止并在Chrome上移动时，Html画布滞后

4 个答案: