chrome 区域外事件捕捉

Question

setCapture()不支持谷歌浏览器，window.captureEvents()也弃用了。怎么实现进度条拖动至进度条区域外，仍然触发鼠标move事件。

Answer 1

const button = document.querySelector('button');
button?.addEventListener('mousedown', handleMoveStart);

let startPoint: { x: number; y: number } | undefined;

let originalOnSelectStart: Document['onselectstart'] = null;

function handleMoveStart(e: MouseEvent) {
  e.stopPropagation();
  if (e.ctrlKey || [1, 2].includes(e.button)) return;
  window.getSelection()?.removeAllRanges();

  e.stopImmediatePropagation();
  window.addEventListener('mousemove', handleMoving);
  window.addEventListener('mousedown', handleMoveEnd);

  originalOnSelectStart = document.onselectstart;
  document.onselectstart = () => false;

  startPoint = { x: e.x, y: e.y };
}

function handleMoving(e: MouseEvent) {
  if (!startPoint) return;
  // DO Something
}

function handleMoveEnd(e: MouseEvent) {
  window.removeEventListener('mousemove', handleMoving);
  window.removeEventListener('mousedown', handleMoveEnd);
  startPoint = undefined;
  if (document.onselectstart !== originalOnSelectStart) {
    document.onselectstart = originalOnSelectStart;
  }
}

Answer 2

我是自己做了失焦感应处理来解决这个问题的。简单说就是有效拖拽区域外有一个无效拖拽区域，当鼠标在有效区域内按下后记录鼠标按下和有效拖拽两个状态，鼠标弹起会修改鼠标按下状态，而经过无效拖拽区域时会更新有效拖拽状态。
不过对你这个场景来说，出了区域就当鼠标按下状态解除也没毛病，应该更简单吧。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。