当前位置：首页 > VUE

vue实现鼠标的监听

2026-01-20 02:25:18VUE

Vue 中监听鼠标事件的方法

在 Vue 中可以通过多种方式监听鼠标事件，以下是常见的实现方法：

使用 `v-on` 指令

Vue 提供了 v-on 指令（简写为 @）来监听 DOM 事件，包括鼠标事件。

<template>
  <div @click="handleClick">点击我</div>
  <div @mousemove="handleMouseMove">鼠标移动到这里</div>
  <div @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">悬停区域</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('鼠标点击事件');
    },
    handleMouseMove(event) {
      console.log('鼠标位置:', event.clientX, event.clientY);
    },
    handleMouseEnter() {
      console.log('鼠标进入元素');
    },
    handleMouseLeave() {
      console.log('鼠标离开元素');
    }
  }
}
</script>

监听全局鼠标事件

如果需要监听整个窗口的鼠标事件，可以在组件生命周期钩子中添加和移除事件监听。

vue实现鼠标的监听

<script>
export default {
  mounted() {
    window.addEventListener('mousemove', this.handleGlobalMouseMove);
  },
  beforeDestroy() {
    window.removeEventListener('mousemove', this.handleGlobalMouseMove);
  },
  methods: {
    handleGlobalMouseMove(event) {
      console.log('全局鼠标位置:', event.pageX, event.pageY);
    }
  }
}
</script>

鼠标事件修饰符

Vue 提供了事件修饰符来处理常见的 DOM 事件细节。

<template>
  <!-- 阻止单击事件继续传播 -->
  <div @click.stop="doThis"></div>

  <!-- 右键点击事件 -->
  <div @contextmenu.prevent="onRightClick"></div>

  <!-- 只在按下左键时触发 -->
  <div @mousedown.left="onLeftMouseDown"></div>
</template>

自定义鼠标指令

对于更复杂的鼠标交互，可以创建自定义指令。

vue实现鼠标的监听

Vue.directive('track-mouse', {
  bind(el, binding) {
    el._mouseHandler = function(event) {
      binding.value(event);
    };
    el.addEventListener('mousemove', el._mouseHandler);
  },
  unbind(el) {
    el.removeEventListener('mousemove', el._mouseHandler);
  }
});

使用自定义指令：

<template>
  <div v-track-mouse="handleTrackedMouse">跟踪鼠标移动</div>
</template>

<script>
export default {
  methods: {
    handleTrackedMouse(event) {
      console.log('跟踪位置:', event.clientX, event.clientY);
    }
  }
}
</script>