Как заставить mosemove читать все движения мышью?

Question

На сайте есть множество элементов, которые при движении мышью должны двигаться. Написал вот такую функцию.

let blur = document.querySelectorAll(".blur");
blur.forEach(function (elem) {
  window.addEventListener("mousemove", function (e) {
    let x = e.clientX / window.innerWidth;
    let y = e.clientY / window.innerHeight;
    elem.style.transform = "translate(-" + x * 15 + "px, -" + y * 15 + "px)";
    elem.style.transform = "translate(-" + x * 15 + "px, -" + y * 15 + "px)";
  });
});

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

Answer 1

Думаю, если вы достанете из цикла вот это:

window.addEventListener("mousemove", function (e) {
    let x = e.clientX / window.innerWidth;
    let y = e.clientY / window.innerHeight;
    elem.style.transform = "translate(-" + x * 15 + "px, -" + y * 15 + "px)";
    elem.style.transform = "translate(-" + x * 15 + "px, -" + y * 15 + "px)";
  });

то работать будет прекрасно. Я не понял для чего вы вешаете множество раз на window обработчик. Это делается единожды где-то в вашем скрипте, а дальше просто работает как должно.

По идее никаких пропусков быть не должно, по крайней мере в такой реализации я отслеживал вообще все действия пользователя:

function idleLogout(object) {
    var t;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;
    window.ontouchstart = resetTimer;
    window.onclick = resetTimer;
    window.onkeypress = resetTimer;
    window.addEventListener('scroll', resetTimer, true);

    function abortAutosave() {
        object.clearTimers();
        object.clearCache();
    }

    function resetTimer() {
        clearTimeout(t);
        // после 10 минут бездействия пользователя сбрасываются таймеры
        t = setTimeout(abortAutosave, 600000);
    }
}

БЛОГ НА HUSL

Как заставить mosemove читать все движения мышью?

Ответы (1 шт):