javascript“ mousemove”事件有時不會觸發

Question

我有一個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);

要重現此問題，只需嘗試左右滑動分隔板兩次，最終，它將出錯！

破碼本示例

Answer 1

如果您在選擇分隔條后快速向上拖動，它看起來就更具可復制性。 添加拖動事件偵聽器可顯示分隔線上的拖動正在消耗事件

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

您可能需要防止該元素消耗拖動事件

Answer 2

@ kriddy800通過查看拖動事件使我走上了正確的軌道。 解決此特定問題以及許多相關的拖動類型問題的方法是取消本機的onDragStart事件，這將停止將來的onDrag事件觸發和屏蔽所需的onMouseMove事件。

divider.ondragstart = () => false;

很好地解釋了所有與拖動相關的內容： https : //javascript.info/mouse-drag-and-drop