当前位置：首页 > VUE

vue实现鼠标移入事件

2026-02-22 00:27:54VUE

鼠标移入事件的基本实现

在Vue中，可以通过v-on指令（或简写为@）监听鼠标移入事件（mouseenter或mouseover）。两者的区别在于事件冒泡机制：

mouseenter：仅在鼠标进入元素时触发，不冒泡。
mouseover：鼠标进入元素或其子元素时触发，会冒泡。

<template>
  <div 
    @mouseenter="handleMouseEnter" 
    @mouseleave="handleMouseLeave"
  >
    鼠标移入此处
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseEnter() {
      console.log('鼠标移入');
    },
    handleMouseLeave() {
      console.log('鼠标移出');
    }
  }
}
</script>

动态样式绑定

通常鼠标移入时会伴随样式变化，可通过v-bind:class或v-bind:style动态绑定：

vue实现鼠标移入事件

<template>
  <div 
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
    :class="{ 'hover-effect': isHovered }"
  >
    悬停效果
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false
    }
  }
}
</script>

<style>
.hover-effect {
  background-color: #f0f0f0;
  transform: scale(1.05);
}
</style>

事件修饰符的应用

Vue提供事件修饰符简化逻辑，例如.stop阻止冒泡或.once只触发一次：

vue实现鼠标移入事件

<div @mouseenter.once="handleFirstHover">
  仅首次悬停触发
</div>

高级场景：延迟触发

通过setTimeout实现延迟响应，注意在mouseleave时清除定时器：

methods: {
  handleMouseEnter() {
    this.timer = setTimeout(() => {
      console.log('悬停超过500ms');
    }, 500);
  },
  handleMouseLeave() {
    clearTimeout(this.timer);
  }
}

自定义指令封装

复用逻辑可通过自定义指令实现：

Vue.directive('hover-delay', {
  bind(el, binding) {
    let timer;
    el.addEventListener('mouseenter', () => {
      timer = setTimeout(() => {
        binding.value();
      }, 500);
    });
    el.addEventListener('mouseleave', () => {
      clearTimeout(timer);
    });
  }
});

// 使用
<div v-hover-delay="showTooltip">悬停显示提示</div>