Javascript"；“鼠标移动”；事件有时不'；t火

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

为了重现这个问题，只需尝试将分隔板左右滑动几次，最终，它就会出错

---

如果您在选择分隔条后快速向上拖动，它看起来更容易复制。添加拖动事件侦听器表明分隔器上的拖动正在消耗该事件

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

---

您可能需要防止元素使用拖动事件

如果您在选择分隔条后快速向上拖动，则拖动事件看起来更容易再现。添加拖动事件侦听器表明分隔器上的拖动正在消耗该事件

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

---

您可能需要防止元素使用拖动事件

@kriddy800让我在查看拖动事件时走上正确的轨道。此特定问题和许多相关的拖动类型问题的修复方法是取消本机的

onDragStart

事件，这反过来将阻止未来的

onDrag

事件触发并屏蔽想要的

onMouseMove

事件

divider.ondragstart=（）=>false；

---

对所有与拖拽相关的事情都有一个很好的解释：

@kriddy800让我正确地看待拖拽事件。此特定问题和许多相关的拖动类型问题的修复方法是取消本机的

onDragStart

事件，这反过来将阻止未来的

onDrag

事件触发并屏蔽想要的

onMouseMove

事件

divider.ondragstart=（）=>false；

这是一个很好的关于拖动的解释：