首页 文章

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

提问于
浏览 次
18

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

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上录制，看看发生了什么 . 结果如下：
As you can see, I have highlighted the areas where I press the left button.

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

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

感谢您的时间 .

javascript html google-chrome canvas

4 回答

  • 0

    当您按住鼠标左键并同时移动它时，您将 dragging .

    Edit ：在某些版本的Chrome中，有一个错误（当我发布此答案时，我已经拥有它，现在我没有），这导致 drag 事件被触发，即使没有元素具有 draggable 属性 . 通常情况下， drag 事件应该只从 draggable 属性设置为 true 的元素中激活（默认情况下图像和锚点是可加工的除外） .

    根据MDN，当 drag 事件被触发时， mouse 事件（例如 mousemove ）不会，这意味着您的函数未被调用 .

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

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

document.addEventListener('mousemove', mouseMove);

document.addEventListener('drag', mouseMove);

    Note ：如果您在函数中使用了'll use the same function for both events, you should be aware of which properties of the event you'，因为 drag 和 mousemove 事件之间存在差异 . 这两个事件不包含完全相同的属性，并且两个事件的某些属性的行为可能不同 .

    回复于
  • 1

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

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

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

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

    并将事件侦听器添加到您需要它的元素，而不是文档 .

    回复于
  • 0
    回复于
  • 7
    function mouseMove(e) {
//do your things here
...
 }

 document.onmousemove = mouseMove;

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

相关问题