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事件。< / p>

divider.ondragstart = () => false;

有关拖动的所有内容的详尽解释：https://javascript.info/mouse-drag-and-drop

javascript“ mousemove”事件有时不会触发

2 个答案: