首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue按键鼠标监听

一文带你重新学习Vue中的按键监听和鼠标监听

2025-07-04 08:39:53 作者：百锦再@新空间

这篇文章主要为大家详细介绍了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）：

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

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

注意事项

按键修饰符是基于 key 事件暴露的，所以确保使用 keyup 或 keydown 事件
Vue 提供了以下按键别名：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
也可以使用按键码（虽然不推荐，因为已废弃）：@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="#" rel="external nofollow"  @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 中处理鼠标事件的主要场景，根据具体需求选择合适的方式即可。

到此这篇关于一文带你重新学习Vue中的按键监听和鼠标监听的文章就介绍到这了,更多相关Vue按键鼠标监听内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！