在拖拽弹框中，点击关闭按钮，导致弹框移动问题

分析

mouseDown 触发时连带触发了 mouseMove 事件

解决

在点击关闭弹框时，在 mousedown 的时候记下鼠标坐标，然后在 mousemove 中判断，如果相同则 return 即可。

示例：

const mouseDown = ref({ x: 0, y: 0 });

function mousedown(e) {
  mouseDown.value = { x: e.clientX, y: e.clientY };
  document.onmousemove = mousemove;
}
function mousemove(e) {
  // console.log('⭐mousemove==>', e.clientX, e.clientY)

  if (e.clientX === mouseDown.value.x && e.clientY === mouseDown.value.y) {
    return;
  }
}

参考

• https://www.zhihu.com/question/21508999

补充

click 事件的触发过程：mouseDown -> mouseUp -> click。 mouseMove 事件的触发过程：mouseDown -> mouseMove -> mouseUp -> click。 如果一个元素即可点击又可以拖拽，也就是同时注册了 click 和 mouseMove 事件，那么无论点击还是拖动元素，最终都会触发 click 事件，这就会引起冲突，解决办法使用一个变量进行控制，mouseMove 事件触发时将变量赋值为 true，在 click 事件监听函数中判断该变量为 true 时不执行点击事件的相关逻辑。

另外，在一些特殊情况下(如元素有 title 属性)mouseDown 触发时会连带触发 mouseMove 事件，其实元素并未真正发生移动，这个时候就需要通过对比元素在两次点击时坐标是否发生变化进行区别处理。