vue实现鼠标的监听
监听鼠标事件
在Vue中监听鼠标事件可以通过v-on指令或@简写方式绑定事件。常见鼠标事件包括click、dblclick、mousedown、mouseup、mousemove等。
<template>
<div
@click="handleClick"
@mousemove="handleMove"
@mouseenter="handleEnter"
@mouseleave="handleLeave"
>
鼠标交互区域
</div>
</template>
<script>
export default {
methods: {
handleClick(event) {
console.log('点击事件', event.clientX, event.clientY);
},
handleMove(event) {
console.log('移动坐标', event.clientX, event.clientY);
},
handleEnter() {
console.log('进入元素');
},
handleLeave() {
console.log('离开元素');
}
}
}
</script>获取鼠标位置信息
通过事件对象的clientX和clientY属性可以获取鼠标相对于浏览器视口的坐标。需要获取相对于元素的位置时，可使用offsetX和offsetY。
methods: {
trackPosition(event) {
const elementX = event.offsetX;
const elementY = event.offsetY;
console.log(`元素内坐标: X=${elementX}, Y=${elementY}`);
}
}全局鼠标监听
需要在组件外监听鼠标事件时，可以在生命周期钩子中添加全局事件监听：
export default {
mounted() {
window.addEventListener('mousemove', this.handleGlobalMove);
},
beforeDestroy() {
window.removeEventListener('mousemove', this.handleGlobalMove);
},
methods: {
handleGlobalMove(event) {
console.log('全局鼠标移动', event.pageX, event.pageY);
}
}
}自定义鼠标指令
可以创建自定义指令实现高级鼠标交互：
Vue.directive('track', {
bind(el, binding) {
el._mouseHandler = (e) => {
binding.value(e);
};
el.addEventListener('mousemove', el._mouseHandler);
},
unbind(el) {
el.removeEventListener('mousemove', el._mouseHandler);
}
});
// 使用方式
<template>
<div v-track="handleTrack"></div>
</template>修饰符应用
Vue提供事件修饰符简化常见操作：
.stop：阻止事件冒泡.prevent：阻止默认行为.once：只触发一次.passive：提升滚动性能
<button @click.stop="doThis">点击不会冒泡</button>
<a @click.prevent="doThat">链接不会跳转</a>性能优化建议
高频事件如mousemove需要注意性能：
- 使用防抖（debounce）或节流（throttle）
- 在组件销毁时移除监听器
- 避免在事件处理中进行复杂计算
import { debounce } from 'lodash';
methods: {
handleMove: debounce(function(event) {
// 处理逻辑
}, 100)
}
