日常开发问题:拖拽不流畅、鼠标滑动太快导致拖拽物脱离鼠标问题

531 阅读1分钟

解决方法: 将mousemove事件挂在docment,而不是对应的element,此时鼠标滑动只要不出docment范围就不会触发上述情况。

const bindEvents = () => {
  sliderControl.value!.addEventListener('mousedown', onSliderDown)
}
const onSliderDown = (evt: MouseEvent) => {
  startX.value = evt.clientX
  
  document.addEventListener('mousemove', onSliderMove)
  document.addEventListener('mouseup', onSliderUp)
}
const onSliderMove = () => {
}
const onSliderUp = () => {
  document.removeEventListener('mousemove', onSliderMove)
  document.removeEventListener('mouseup', onSliderUp)
}