Событие «MouseMove» JavaScript иногда не срабатывает - PullRequest
Новая
       22

Событие «MouseMove» JavaScript иногда не срабатывает

0 голосов
/ 14 ноября 2018

У меня есть пример codepen.io, над которым я работал, чтобы создать складную боковую панель из чистого js, которая также может быть изменяемого размера.Пример работает в 70% случаев, но очень часто изменение размера панели приводит к тому, что события «mousemove» не генерируются, и панель просто зависает (то есть не отслеживает положение мыши x).Я не могу найти проблему сам, задаваясь вопросом, может ли кто-нибудь пролить свет на этот вопрос.Возможно, есть лучший подход к добавлению / удалению прослушивателей событий для такого рода работы, о котором я не задумывался.

Суть логики js выглядит следующим образом: 

const divider = document.querySelector(".divider");

const startSlide = event => {
   const viewportWidth = window.visualViewport.width;
   const width = viewportWidth - event.clientX;
   divider.style.width = `${width}px`;
};

const stopSlide = event => {
   window.removeEventListener("pointermove", startSlide, true);
   window.removeEventListener("pointerup", stopSlide, true);
};

const initSlide = event => {
   window.addEventListener("pointermove", startSlide, true);
   window.addEventListener("pointerup", stopSlide, true);
};

divider.addEventListener("pointerdown", initSlide, true);

Чтобы воспроизвести проблему, просто попытайтесь сдвинуть панель делителя влево и вправо пару раз, в конце концов, она выдаст ошибку!

пример разбитого кода

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

@ kriddy800 поставил меня на правильный путь, глядя на события перетаскивания.Исправление для этой конкретной проблемы и многих связанных с этим проблем типа перетаскивания - отмена собственного события onDragStart, которое, в свою очередь, не даст будущим onDrag событиям запускать и маскировать требуемые onMouseMove события. 

divider.ondragstart = () => false;

Отличное объяснение всего, что связано с перетаскиванием: https://javascript.info/mouse-drag-and-drop

0 голосов
/ 14 ноября 2018

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

  divider.addEventListener("drag", function( event ) {
   console.log("DRAG");
  }, true);

Возможно, вам нужно запретить элементу использовать событие перетаскивания.

...