一文帶你重新學(xué)習(xí)Vue中的按鍵監(jiān)聽和鼠標(biāo)監(jiān)聽

更新時(shí)間：2025年07月04日 08:39:52 作者：百錦再@新空間

這篇文章主要為大家詳細(xì)介紹了Vue中的按鍵監(jiān)聽和鼠標(biāo)監(jiān)聽的常見實(shí)現(xiàn)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

按鍵事件

在 Vue 中，有幾種方法可以監(jiān)聽 Enter 按鍵事件。以下是常見的實(shí)現(xiàn)方式：

1. 使用@keyup.enter修飾符

<template>
  <input 
    type="text" 
    v-model="inputValue"
    @keyup.enter="handleEnter"
    placeholder="按Enter鍵觸發(fā)"
  >
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleEnter() {
      console.log('Enter鍵被按下', this.inputValue)
      // 在這里處理Enter鍵按下的邏輯
    }
  }
}
</script>

2. 使用v-on監(jiān)聽鍵盤事件

<template>
  <input 
    type="text" 
    v-model="inputValue"
    @keyup="checkEnter"
    placeholder="按Enter鍵觸發(fā)"
  >
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    checkEnter(event) {
      if (event.key === 'Enter') {
        console.log('Enter鍵被按下', this.inputValue)
        // 在這里處理Enter鍵按下的邏輯
      }
    }
  }
}
</script>

3. 在組件上監(jiān)聽原生事件

如果是在自定義組件上監(jiān)聽，需要使用 .native 修飾符（Vue 2）或 v-on 的寫法（Vue 3）：

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

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

4. 全局監(jiān)聽鍵盤事件

<template>
  <div>
    <!-- 內(nèi)容 -->
  </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>

注意事項(xiàng)

按鍵修飾符是基于 key 事件暴露的，所以確保使用 keyup 或 keydown 事件
Vue 提供了以下按鍵別名：.enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
也可以使用按鍵碼（雖然不推薦，因?yàn)橐褟U棄）：@keyup.13（13是Enter的鍵碼）

鼠標(biāo)事件

1. 基本鼠標(biāo)事件監(jiān)聽

常用鼠標(biāo)事件

<template>
  <div 
    @click="handleClick"          <!-- 單擊 -->
    @dblclick="handleDoubleClick"  <!-- 雙擊 -->
    @mousedown="handleMouseDown"   <!-- 鼠標(biāo)按下 -->
    @mouseup="handleMouseUp"      <!-- 鼠標(biāo)釋放 -->
    @mousemove="handleMouseMove"  <!-- 鼠標(biāo)移動(dòng) -->
    @mouseover="handleMouseOver"  <!-- 鼠標(biāo)移入 -->
    @mouseout="handleMouseOut"    <!-- 鼠標(biāo)移出 -->
    @mouseenter="handleMouseEnter" <!-- 鼠標(biāo)進(jìn)入（不冒泡） -->
    @mouseleave="handleMouseLeave" <!-- 鼠標(biāo)離開（不冒泡） -->
    @contextmenu="handleContextMenu" <!-- 右鍵菜單 -->
  >
    鼠標(biāo)事件區(qū)域
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(event) {
      console.log('單擊事件', event)
    },
    handleDoubleClick(event) {
      console.log('雙擊事件', event)
    },
    // 其他事件處理函數(shù)...
  }
}
</script>

2. 事件修飾符

Vue 提供了一些有用的修飾符來處理鼠標(biāo)事件：

<template>
  <div>
    <!-- 阻止默認(rèn)行為 -->
    <a href="#" rel="external nofollow"  @click.prevent="handleClick">阻止默認(rèn)跳轉(zhuǎn)</a>
    
    <!-- 阻止事件冒泡 -->
    <div @click="outerClick">
      <div @click.stop="innerClick">點(diǎn)擊我不會(huì)冒泡到外層</div>
    </div>
    
    <!-- 事件只觸發(fā)一次 -->
    <button @click.once="handleOnceClick">只會(huì)觸發(fā)一次</button>
    
    <!-- 左/中/右鍵點(diǎn)擊 -->
    <div @click.left="leftClick">左鍵點(diǎn)擊</div>
    <div @click.middle="middleClick">中鍵點(diǎn)擊</div>
    <div @click.right="rightClick">右鍵點(diǎn)擊</div>
    
    <!-- 串聯(lián)修飾符 -->
    <button @click.stop.prevent="handleClick">阻止冒泡和默認(rèn)行為</button>
  </div>
</template>

3. 鼠標(biāo)按鍵檢測

可以通過事件對(duì)象檢測具體按下了哪個(gè)鼠標(biāo)按鍵：

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. 鼠標(biāo)位置信息

可以從事件對(duì)象獲取鼠標(biāo)位置信息：

methods: {
  handleMouseMove(event) {
    // 相對(duì)于瀏覽器窗口的坐標(biāo)
    console.log('clientX:', event.clientX, 'clientY:', event.clientY)
    
    // 相對(duì)于文檔的坐標(biāo)
    console.log('pageX:', event.pageX, 'pageY:', event.pageY)
    
    // 相對(duì)于事件元素的坐標(biāo)
    console.log('offsetX:', event.offsetX, 'offsetY:', event.offsetY)
    
    // 相對(duì)于屏幕的坐標(biāo)
    console.log('screenX:', event.screenX, 'screenY:', event.screenY)
  }
}

5. 自定義指令監(jiān)聽鼠標(biāo)事件

可以創(chuàng)建自定義指令來監(jiān)聽鼠標(biāo)事件：

// 全局注冊
Vue.directive('mouse-tooltip', {
  bind(el, binding) {
    el.addEventListener('mouseenter', () => {
      // 顯示工具提示邏輯
      console.log('鼠標(biāo)進(jìn)入', binding.value)
    })
    el.addEventListener('mouseleave', () => {
      // 隱藏工具提示邏輯
      console.log('鼠標(biāo)離開')
    })
  }
})

// 使用
<div v-mouse-tooltip="'提示內(nèi)容'">懸停我顯示提示</div>

6. 組合鼠標(biāo)事件

可以組合多個(gè)鼠標(biāo)事件實(shí)現(xiàn)復(fù)雜交互：

<template>
  <div 
    @mousedown="startDrag"
    @mousemove="handleDrag"
    @mouseup="endDrag"
    @mouseleave="endDrag"
  >
    可拖拽區(qū)域
  </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. 性能優(yōu)化建議

1.對(duì)于頻繁觸發(fā)的事件（如 mousemove），使用防抖或節(jié)流：

import { debounce } from 'lodash'

methods: {
  handleMouseMove: debounce(function(event) {
    // 防抖處理后的函數(shù)
  }, 100)
}

2.不需要時(shí)及時(shí)移除事件監(jiān)聽器，特別是在組件銷毀時(shí)

3.對(duì)于大量元素的事件監(jiān)聽，考慮使用事件委托

這些方法覆蓋了 Vue 中處理鼠標(biāo)事件的主要場景，根據(jù)具體需求選擇合適的方式即可。

到此這篇關(guān)于一文帶你重新學(xué)習(xí)Vue中的按鍵監(jiān)聽和鼠標(biāo)監(jiān)聽的文章就介紹到這了,更多相關(guān)Vue按鍵鼠標(biāo)監(jiān)聽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: