当前位置：首页 > VUE

vue实现mouseout

2026-02-10 06:36:56VUE

Vue 中实现 mouseout 事件

在 Vue 中实现 mouseout 事件可以通过 v-on 指令或 @ 简写绑定事件监听器。mouseout 事件在鼠标移出元素或其子元素时触发。

基本用法

<template>
  <div @mouseout="handleMouseOut">
    鼠标移出此区域触发事件
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseOut(event) {
      console.log('鼠标移出元素', event.target)
    }
  }
}
</script>

与 mouseleave 的区别

mouseout 和 mouseleave 都表示鼠标离开元素，但触发机制不同：

mouseout：鼠标离开元素或其子元素时触发（冒泡）
mouseleave：鼠标离开元素本身时触发（不冒泡）

<template>
  <div class="parent" @mouseout="log('parent out')" @mouseleave="log('parent leave')">
    父元素
    <div class="child" @mouseout="log('child out')" @mouseleave="log('child leave')">
      子元素
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    log(msg) {
      console.log(msg)
    }
  }
}
</script>

事件修饰符

Vue 提供事件修饰符简化事件处理：

<template>
  <!-- 阻止默认行为 -->
  <div @mouseout.prevent="handleMouseOut">

  <!-- 只触发一次 -->
  <div @mouseout.once="handleMouseOut">

  <!-- 事件捕获模式 -->
  <div @mouseout.capture="handleMouseOut">
</template>

动态事件绑定

可以通过计算属性动态绑定事件：

<template>
  <div @[eventName]="handleMouseOut">
    动态事件绑定
  </div>
</template>

<script>
export default {
  data() {
    return {
      useMouseOut: true
    }
  },
  computed: {
    eventName() {
      return this.useMouseOut ? 'mouseout' : 'mouseleave'
    }
  }
}
</script>