重新学习Vue中的按键监听和鼠标监听_vue2 监听鼠标移入移除

文章目录

• 按键事件
• • 1. 使用 `@keyup.enter` 修饰符
  • 2. 使用 `v-on` 监听键盘事件
  • 3. 在组件上监听原生事件
  • • Vue 2
    • Vue 3
  • 4. 全局监听键盘事件
  • 注意事项
• 鼠标事件
• • 1. 基本鼠标事件监听
  • • 常用鼠标事件
  • 2. 事件修饰符
  • 3. 鼠标按键检测
  • 4. 鼠标位置信息
  • 5. 自定义指令监听鼠标事件
  • 6. 组合鼠标事件
  • 7. 性能优化建议

按键事件

在 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 = true this.startX = event.clientX this.startY = event.clientY }, handleDrag(event) { if (!this.isDragging) return const dx = event.clientX - this.startX const dy = event.clientY - this.startY console.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 中处理鼠标事件的主要场景，根据具体需求选择合适的方式即可。

全国邮编查询