当鼠标左键按下并在Chrome上移动时，Html画布出现延迟
当鼠标左键按下并在Chrome上移动时，Html画布出现延迟
提问于 2015-09-13 15:21:16
我已经创建了一个画布，并在其中添加了鼠标事件：
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上录制，看看发生了什么。结果如下：
真正奇怪的是，当我按下鼠标中键或右键时，游戏也会做同样的事情，但它根本不会延迟。你在做什么铬合金？
编辑:在这里测试: www.vertix.io注意，似乎不是每个人都能重现这个问题。
谢谢您抽时间见我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32547283
复制相关文章
相似问题
腾讯云开发者
