重新学习Vue中的按键监听和鼠标监听

按键事件

在 Vue 中，有几种方法可以监听 Enter 按键事件。以下是常见的实现方式：

1. 使用 @keyup.enter 修饰符

<template><input type="text" v-model="inputValue"@keyup.enter="handleEnter"placeholder="按Enter键触发">
</template><script>
export default {data() {return {inputValue: ''}},methods: {handleEnter() {console.log('Enter键被按下', this.inputValue)// 在这里处理Enter键按下的逻辑}}
}
</script>

2. 使用 v-on 监听键盘事件

<template><input type="text" v-model="inputValue"@keyup="checkEnter"placeholder="按Enter键触发">
</template><script>
export default {data() {return {inputValue: ''}},methods: {checkEnter(event) {if (event.key === 'Enter') {console.log('Enter键被按下', this.inputValue)// 在这里处理Enter键按下的逻辑}}}
}
</script>

3. 在组件上监听原生事件

如果是在自定义组件上监听，需要使用 .native 修饰符（Vue 2）或 v-on 的写法（Vue 3）：

Vue 2

<my-component @keyup.enter.native="handleEnter" />

Vue 3

<my-component @keyup.enter="handleEnter" />

4. 全局监听键盘事件

<template><div><!-- 内容 --></div>
</template><script>
export default {mounted() {window.addEventListener('keyup', this.handleGlobalKeyUp)},beforeDestroy() {window.removeEventListener('keyup', this.handleGlobalKeyUp)},methods: {handleGlobalKeyUp(event) {if (event.key === 'Enter') {console.log('全局Enter键被按下')// 在这里处理全局Enter键按下的逻辑}}}
}
</script>

注意事项

1. 按键修饰符是基于 key 事件暴露的，所以确保使用 keyup 或 keydown 事件
2. Vue 提供了以下按键别名：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
3. 也可以使用按键码（虽然不推荐，因为已废弃）：@keyup.13（13是Enter的键码）

---

鼠标事件

1. 基本鼠标事件监听

常用鼠标事件

<template><div @click="handleClick"          <!-- 单击 -->@dblclick="handleDoubleClick"  <!-- 双击 -->@mousedown="handleMouseDown"   <!-- 鼠标按下 -->@mouseup="handleMouseUp"      <!-- 鼠标释放 -->@mousemove="handleMouseMove"  <!-- 鼠标移动 -->@mouseover="handleMouseOver"  <!-- 鼠标移入 -->@mouseout="handleMouseOut"    <!-- 鼠标移出 -->@mouseenter="handleMouseEnter" <!-- 鼠标进入（不冒泡） -->@mouseleave="handleMouseLeave" <!-- 鼠标离开（不冒泡） -->@contextmenu="handleContextMenu" <!-- 右键菜单 -->>鼠标事件区域</div>
</template><script>
export default {methods: {handleClick(event) {console.log('单击事件', event)},handleDoubleClick(event) {console.log('双击事件', event)},// 其他事件处理函数...}
}
</script>

2. 事件修饰符

Vue 提供了一些有用的修饰符来处理鼠标事件：

<template><div><!-- 阻止默认行为 --><a href="#" @click.prevent="handleClick">阻止默认跳转</a><!-- 阻止事件冒泡 --><div @click="outerClick"><div @click.stop="innerClick">点击我不会冒泡到外层</div></div><!-- 事件只触发一次 --><button @click.once="handleOnceClick">只会触发一次</button><!-- 左/中/右键点击 --><div @click.left="leftClick">左键点击</div><div @click.middle="middleClick">中键点击</div><div @click.right="rightClick">右键点击</div><!-- 串联修饰符 --><button @click.stop.prevent="handleClick">阻止冒泡和默认行为</button></div>
</template>

3. 鼠标按键检测

可以通过事件对象检测具体按下了哪个鼠标按键：

methods: {handleMouseDown(event) {// 0: 左键, 1: 中键, 2: 右键console.log('按下的按键:', event.button)// 检测组合键if (event.ctrlKey) console.log('按下了Ctrl键')if (event.shiftKey) console.log('按下了Shift键')if (event.altKey) console.log('按下了Alt键')if (event.metaKey) console.log('按下了Meta键(Command键)')}
}

4. 鼠标位置信息

可以从事件对象获取鼠标位置信息：

methods: {handleMouseMove(event) {// 相对于浏览器窗口的坐标console.log('clientX:', event.clientX, 'clientY:', event.clientY)// 相对于文档的坐标console.log('pageX:', event.pageX, 'pageY:', event.pageY)// 相对于事件元素的坐标console.log('offsetX:', event.offsetX, 'offsetY:', event.offsetY)// 相对于屏幕的坐标console.log('screenX:', event.screenX, 'screenY:', event.screenY)}
}

5. 自定义指令监听鼠标事件

可以创建自定义指令来监听鼠标事件：

// 全局注册
Vue.directive('mouse-tooltip', {bind(el, binding) {el.addEventListener('mouseenter', () => {// 显示工具提示逻辑console.log('鼠标进入', binding.value)})el.addEventListener('mouseleave', () => {// 隐藏工具提示逻辑console.log('鼠标离开')})}
})// 使用
<div v-mouse-tooltip="'提示内容'">悬停我显示提示</div>

6. 组合鼠标事件

可以组合多个鼠标事件实现复杂交互：

<template><div @mousedown="startDrag"@mousemove="handleDrag"@mouseup="endDrag"@mouseleave="endDrag">可拖拽区域</div>
</template><script>
export default {data() {return {isDragging: false,startX: 0,startY: 0}},methods: {startDrag(event) {this.isDragging = truethis.startX = event.clientXthis.startY = event.clientY},handleDrag(event) {if (!this.isDragging) returnconst dx = event.clientX - this.startXconst dy = event.clientY - this.startYconsole.log(`拖拽距离: x=${dx}, y=${dy}`)},endDrag() {this.isDragging = false}}
}
</script>

7. 性能优化建议

1. 对于频繁触发的事件（如 mousemove），使用防抖或节流：

   import { debounce } from 'lodash'methods: {handleMouseMove: debounce(function(event) {// 防抖处理后的函数}, 100)
   }
   

2. 不需要时及时移除事件监听器，特别是在组件销毁时

3. 对于大量元素的事件监听，考虑使用事件委托

这些方法覆盖了 Vue 中处理鼠标事件的主要场景，根据具体需求选择合适的方式即可。