elementUI 弹窗 - 鼠标拖出，弹窗关闭的问题

　　elementUI 弹窗有个问题，就是鼠标点在弹框上没有放开，然后又移出到外面的遮罩上，弹窗关闭了（触发了遮罩的点击事件）。

　　这个问题直到 elementUI 2.15.7 都没有解决；但是 element-plus 也就是基于 Vue3 的版本解决了，使用了 mouseup 和 mousedown。

　　element-plus 源代码地址：https://github.com/element-plus/element-plus/blob/dev/packages/components/dialog/src/dialog.vue

　　

 

 　解决方案的源代码：https://github.com/element-plus/element-plus/blob/dev/packages/hooks/use-same-target/index.ts

export const useSameTarget = (handleClick) => {
  let mousedownTarget = false
  let mouseupTarget = false
  // 参阅这个 https://javascript.info/mouse-events-basics
  // 按这个顺序触发的事件: mousedown -> mouseup -> click
  // 在点击事件触发后，我们需要设置 mousedown 和 mouseup 的 target 为 false
  const onClick = (e: MouseEvent) => {
    // 当且仅当
    if (mousedownTarget && mouseupTarget) {
      handleClick(e)
    }
    mousedownTarget = mouseupTarget = false
  }

  const onMousedown = (e: MouseEvent) => {
    // 标记当前 mousedown 事件的 target
    mousedownTarget = e.target === e.currentTarget
  }
  const onMouseup = (e: MouseEvent) => {
    // 标记当前 mouseup 事件的 target
    mouseupTarget = e.target === e.currentTarget
  }

  return { onClick, onMousedown, onMouseup }
}

解决方法就是：因为每次鼠标点击都按顺序触发了以下三个事件：mousedown -> mouseup -> click，所以在 mousedown 和 mouseup 的时候标记下目标是不是遮罩层，只有当目标都是遮罩层的时候，才触发 click 事件（关闭弹窗），并重置 mousedownTarget 和 mouseupTarget 为 false。