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

要重现此问题，只需尝试左右滑动分隔面板几次，最终，它会出现错误！

broken codepen example

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

Javascript "mousemove" 事件有时不会触发

Javascript "mousemove" event sometimes doesn't fire

javascript

dom-events

addeventlistener

mousemove