一文帶你重新學習Vue中的按鍵監(jiān)聽和鼠標監(jiān)聽
更新時間：2025年07月04日 08:39:52 作者：百錦再@新空間
這篇文章主要為大家詳細介紹了Vue中的按鍵監(jiān)聽和鼠標監(jiān)聽的常見實現(xiàn)方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
按鍵事件
在 Vue 中，有幾種方法可以監(jiān)聽 Enter 按鍵事件。以下是常見的實現(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）：
Vue 2
<my-component @keyup.enter.native="handleEnter" />
Vue 3
<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>
注意事項
- 按鍵修飾符是基于
key事件暴露的，所以確保使用keyup或keydown事件 - Vue 提供了以下按鍵別名：
.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right - 也可以使用按鍵碼（雖然不推薦，因為已廢棄）：
@keyup.13（13是Enter的鍵碼）
鼠標事件
1. 基本鼠標事件監(jiān)聽
常用鼠標事件
<template>
<div
@click="handleClick" <!-- 單擊 -->
@dblclick="handleDoubleClick" <!-- 雙擊 -->
@mousedown="handleMouseDown" <!-- 鼠標按下 -->
@mouseup="handleMouseUp" <!-- 鼠標釋放 -->
@mousemove="handleMouseMove" <!-- 鼠標移動 -->
@mouseover="handleMouseOver" <!-- 鼠標移入 -->
@mouseout="handleMouseOut" <!-- 鼠標移出 -->
@mouseenter="handleMouseEnter" <!-- 鼠標進入（不冒泡） -->
@mouseleave="handleMouseLeave" <!-- 鼠標離開（不冒泡） -->
@contextmenu="handleContextMenu" <!-- 右鍵菜單 -->
>
鼠標事件區(qū)域
</div>
</template>
<script>
export default {
methods: {
handleClick(event) {
console.log('單擊事件', event)
},
handleDoubleClick(event) {
console.log('雙擊事件', event)
},
// 其他事件處理函數(shù)...
}
}
</script>
2. 事件修飾符
Vue 提供了一些有用的修飾符來處理鼠標事件：
<template>
<div>
<!-- 阻止默認行為 -->
<a href="#" rel="external nofollow" @click.prevent="handleClick">阻止默認跳轉</a>
<!-- 阻止事件冒泡 -->
<div @click="outerClick">
<div @click.stop="innerClick">點擊我不會冒泡到外層</div>
</div>
<!-- 事件只觸發(fā)一次 -->
<button @click.once="handleOnceClick">只會觸發(fā)一次</button>
<!-- 左/中/右鍵點擊 -->
<div @click.left="leftClick">左鍵點擊</div>
<div @click.middle="middleClick">中鍵點擊</div>
<div @click.right="rightClick">右鍵點擊</div>
<!-- 串聯(lián)修飾符 -->
<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. 自定義指令監(jiān)聽鼠標事件
可以創(chuàng)建自定義指令來監(jiān)聽鼠標事件：
// 全局注冊
Vue.directive('mouse-tooltip', {
bind(el, binding) {
el.addEventListener('mouseenter', () => {
// 顯示工具提示邏輯
console.log('鼠標進入', binding.value)
})
el.addEventListener('mouseleave', () => {
// 隱藏工具提示邏輯
console.log('鼠標離開')
})
}
})
// 使用
<div v-mouse-tooltip="'提示內(nèi)容'">懸停我顯示提示</div>
6. 組合鼠標事件
可以組合多個鼠標事件實現(xiàn)復雜交互：
<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.對于頻繁觸發(fā)的事件（如 mousemove），使用防抖或節(jié)流：
import { debounce } from 'lodash'
methods: {
handleMouseMove: debounce(function(event) {
// 防抖處理后的函數(shù)
}, 100)
}
2.不需要時及時移除事件監(jiān)聽器，特別是在組件銷毀時
3.對于大量元素的事件監(jiān)聽，考慮使用事件委托
這些方法覆蓋了 Vue 中處理鼠標事件的主要場景，根據(jù)具體需求選擇合適的方式即可。
到此這篇關于一文帶你重新學習Vue中的按鍵監(jiān)聽和鼠標監(jiān)聽的文章就介紹到這了,更多相關Vue按鍵鼠標監(jiān)聽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
文章比較了Vue和React的核心設計理念、響應式系統(tǒng)、虛擬DOM、編譯時優(yōu)化和功能特性,Vue通過編譯時優(yōu)化和響應式系統(tǒng)實現(xiàn)細粒度更新,而React依賴運行時調(diào)度（Fiber）實現(xiàn)可控的更新優(yōu)先級,兩者都支持函數(shù)式編程,但React在函數(shù)式編程方面提供了更高的靈活性2025-02-02
這篇文章主要介紹了vue二選一tab欄切換新做法實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章主要介紹了使用 JSON.stringify() 列化一個Error,需要的朋友可以參考下2023-10-10
vue通過數(shù)據(jù)過濾實現(xiàn)表格合并
這篇文章主要為大家詳細介紹了vue通過數(shù)據(jù)過濾實現(xiàn)表格合并，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
在vue項目開發(fā)中一直有一個令人都疼的問題,就是緩存問題,這篇文章主要給大家介紹了關于Vue項目發(fā)布后瀏覽器緩存問題的解決方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue如何給數(shù)組添加新對象并賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
今天小編就為大家分享一篇vue 中滾動條始終定位在底部的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
文章詳細介紹了如何將Vue項目從本地環(huán)境部署到線上服務器,包括打包本地項目、服務器環(huán)境搭建、項目上傳與配置以及解決部署后頁面訪問異常問題2026-02-02
這篇文章主要介紹了el-date-picker篩選時間日期選擇范圍,本文通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2024-12-12