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

文章目录

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

按键事件

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

1. 使用 `@keyup.enter` 修饰符

html 复制代码

<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` 监听键盘事件

html 复制代码

<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

html 复制代码

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

Vue 3

html 复制代码

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

4. 全局监听键盘事件

html 复制代码

<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>

注意事项

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

鼠标事件

1. 基本鼠标事件监听

常用鼠标事件

html 复制代码

<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 提供了一些有用的修饰符来处理鼠标事件：

html 复制代码

<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. 鼠标按键检测

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

javascript 复制代码

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. 鼠标位置信息

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

javascript 复制代码

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. 自定义指令监听鼠标事件

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

javascript 复制代码

// 全局注册
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. 组合鼠标事件

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

html 复制代码

<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. 性能优化建议

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

javascript 复制代码

import { debounce } from 'lodash'

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

不需要时及时移除事件监听器，特别是在组件销毁时
对于大量元素的事件监听，考虑使用事件委托

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

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

文章目录

按键事件

1. 使用 @keyup.enter 修饰符

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

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

Vue 2

Vue 3

4. 全局监听键盘事件

注意事项

鼠标事件

1. 基本鼠标事件监听

常用鼠标事件

2. 事件修饰符

3. 鼠标按键检测

4. 鼠标位置信息

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

6. 组合鼠标事件

7. 性能优化建议

1. 使用 `@keyup.enter` 修饰符

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