Html Задержка холста при нажатии левой мыши и перемещение по Chrome

Я создал холст, и я добавил к нему события мыши:

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

Теперь проблема заключается в том, что я удерживаю единственную левую кнопку мыши и одновременно перемещаю мышь, моя игра значительно отстает. Простое перемещение мыши не вызывает отставания. Я проверил это на хроме и на firefox. Кажется, что я могу только воссоздать проблему на хроме. Использование средней кнопки мыши или правой кнопки имеет такое же поведение в игре и не вызывает отставания. Только при использовании левой кнопки мыши происходит задержка.

Я просмотрел ответы и обнаружил, что я должен предотвращать поведение по умолчанию следующим образом:

e.preventDefault();

Но это не решило проблему. Я также попытался обновить номер на экране, который представляет позицию мыши. И он обновляется нормально. Только сама игра отставала. Может быть, onMouseMoved никогда не вызывается, пока левая кнопка удерживается нажатой? Но тогда почему он называется с помощью средней и правой кнопки?

Проблема должна заключаться в коде, который я вызываю внутри метода перемещения, потому что он отлично работает, когда я не держу левый ключ, и он хорошо работает на firefox. Должно быть что-то еще происходит.

EDIT: Я решил записать на хром, чтобы посмотреть, что происходит. Вот результат:

Что действительно странно, когда я нажимаю среднюю кнопку мыши или правую кнопку, игра делает то же самое, но она вообще не отстает. Что вы делаете хром?

EDIT: проверьте здесь: www.vertix.io обратите внимание, что не все, похоже, могут воспроизвести эту проблему.

Спасибо за ваше время.

Ответ 1

Когда вы удерживаете левую кнопку мыши и перемещаете ее в одно и то же время, вы перетаскиваете.

Изменить. В некоторых версиях 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);

Примечание. Если вы будете использовать одну и ту же функцию для обоих событий, вы должны знать, какие свойства события, которое вы используете в функции, из-за разницы между drag и mousemove. Два события не содержат одних и тех же свойств, и поведение некоторых свойств может быть не одинаковым в обоих из них.

Ответ 2

В документе есть событие мыши. Поскольку мы не можем видеть, что у вас есть в документе, трудно понять, является ли это причиной ваших проблем.

Попробуйте перемещать событие мыши только на холст, так как это единственное место, которое вам нужно, я полагаю. Нет событий обработки точки для документа, если его не часть игры, плюс документ последний в списке, если дочерние элементы связаны с событиями. Они идут первым, а затем он пузырится до вашего.

Похоже, что вы используете фреймворк какого-либо типа, во всех возможных случаях есть еще один прослушиватель событий мыши, который является частью работы фрейма, который может замедлить вас, не предотвращая по умолчанию. Вам нужно будет искать фреймворк, чтобы узнать, есть ли у него слушатель для любого из событий мыши.

И используйте addEventListener вместо прямого подключения события через .onmousedown = eventHandler
например canvas.addEventListener("mousedown",eventHandler);

И добавьте прослушиватель событий к нужному элементу, а не документу.

Ответ 3

Вы считали дросселирование?

Отъезд https://blog.toggl.com/2013/02/increasing-perceived-performance-with-_throttle/

Ответ 4

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

 document.onmousemove = mouseMove;

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