重新学习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>

注意事项

  1. 按键修饰符是基于 key 事件暴露的,所以确保使用 keyupkeydown 事件
  2. Vue 提供了以下按键别名:.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
  3. 也可以使用按键码(虽然不推荐,因为已废弃):@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. 性能优化建议

  1. 对于频繁触发的事件(如 mousemove),使用防抖或节流:

    javascript 复制代码
    import { debounce } from 'lodash'
    
    methods: {
      handleMouseMove: debounce(function(event) {
        // 防抖处理后的函数
      }, 100)
    }
  2. 不需要时及时移除事件监听器,特别是在组件销毁时

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

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

相关推荐
鱼樱前端31 分钟前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder1 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手2 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆3 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅3 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范