vue3中mouseleave在双击时候 不触发怎么处理，离开的时候才触发

在Vue 3中，`mouseleave`事件通常不会在快速连续的点击事件（例如双击）之后立即触发，因为浏览器会认为这是一个连续的动作。如果你希望在用户完成一次双击操作后，`mouseleave`才会触发，可以采用以下几种策略：

1. **阻止默认行为并设置延迟判断**:
使用`event.preventDefault()`阻止双击事件的默认行为，并添加一个定时器，在用户停止鼠标移动一段时间后再执行`mouseleave`的回调。

v-on:dblclick.prevent="handleDoubleClick"
setTimeout(() => {
  if (isMouseMoved) { // isMouseMoved是一个记录是否移动过的标志
    this.handleMouseLeave()
  }
}, 500) // 延迟500毫秒检查

2. **监听`mouseup`事件**:
双击结束后，`mouseup`会被触发，这时你可以判断是否有`mousedown`事件，如果没有，说明是一次正常的离开，而不是双击后的移动。

v-on:mousedown="onMouseDown"
v-on:mouseup="checkForLeaveAfterDoubleClick"
...
methods: {
  onMouseDown() {
    this.isMouseMoved = true;
  },
  checkForLeaveAfterDoubleClick() {
    if (!this.mousedownEvent) {
      this.handleMouseLeave();
    } else {
      this.mousedownEvent = null; // 清除标记
    }
  },
}

3. **使用`@mouseleave.capture`**:
这可以确保`mouseleave`事件在其他事件（如双击）完成后立即捕获。但请注意这可能会对性能产生影响，因为它会阻塞当前事件流。

<div v-on:mousedown.capture="startTracking" v-on:mouseleave="handleMouseLeave"></div>

然后在`methods`里增加状态跟踪：

data() {
  return {
    mouseDownCaptured: false,
  };
},
methods: {
  startTracking() {
    this.mouseDownCaptured = true;
  },
  handleMouseLeave() {
    if (!this.mouseDownCaptured) {
      // 用户并没有进行双击，直接离开
    } else {
      // ...处理双击离开
    }
  },
}