Vue監(jiān)聽鍵盤鼠標(biāo)事件

AlphaWatch 發(fā)布于2019-08-23 17:08 / 1093人閱讀

摘要：前言業(yè)務(wù)場(chǎng)景頁(yè)面監(jiān)聽鍵盤鼠標(biāo)等事件。實(shí)現(xiàn)原理增加監(jiān)聽這里定義了，鍵盤按出的時(shí)候的事件和鼠標(biāo)滑輪滾動(dòng)的事件。，必參，字符串，注意要把事件的名稱去掉方法調(diào)用鍵盤事件滑輪事件移除監(jiān)控后記感謝支持。

1 前言 1.1 業(yè)務(wù)場(chǎng)景

vue頁(yè)面監(jiān)聽鍵盤鼠標(biāo)等事件。

官方給的例子是在input標(biāo)簽中的，我們想要的效果是不使用固定標(biāo)簽。

2 實(shí)現(xiàn)原理 2.1 增加監(jiān)聽

mounted () {
    window.addEventListener("keyup",this.handleKeyup)
    window.addEventListener("scroll",this.handleScroll)
},

這里定義了，鍵盤按出的時(shí)候的事件和鼠標(biāo)滑輪滾動(dòng)的事件。

這里可以自行查詢下有哪些事件，

關(guān)鍵字：

HTML DOM Event

可參考：W3school 菜鳥教程

這里根據(jù)addEventListener(event,function)的用法。

event，必參，字符串，注意要把DOM事件的名稱去掉on

2.2 方法調(diào)用

methods:{
    // 鍵盤事件
    handleKeyup(event){
        const e = event || window.event || arguments.callee.caller.arguments[0]
        if(!e) return
        const {key,keyCode} = e
        console.log(keyCode)
        console.log(key)
    },
    //  滑輪事件
    handleScroll(){
        var e = document.body.scrollTop||document.documentElement.scrollTop
        if(!e) return
        console.log(e)
    },
}

2.3 移除監(jiān)控

destroyed () {
    window.removeEventListener("keyup",this.handleKeyup)
    window.removeEventListener("scroll",this.handleScroll)
},

3 后記

感謝支持。若不足之處，歡迎大家指出，共勉。

如果覺得不錯(cuò)，記得點(diǎn)贊，謝謝大家

云服務(wù)器 GPU云服務(wù)器監(jiān)聽鍵盤事件 js監(jiān)聽鼠標(biāo)三擊事件鍵盤鼠標(biāo) 鼠標(biāo)鍵盤

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103870.html

相關(guān)文章

Vue.js中的v-on(事件處理)

摘要：不必?fù)?dān)心，因?yàn)樗械氖录幚矸椒ê捅磉_(dá)式都嚴(yán)格綁定在當(dāng)前視圖的上，它不會(huì)導(dǎo)致任何維護(hù)上的困難。當(dāng)一個(gè)被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 Vue.js的事件處理監(jiān)聽事件我們可以用 v-on 指令監(jiān)聽 DOM 事件來(lái)觸發(fā)一些 JavaScript 代碼。 {{msg}} var vm = new Vue({ el:.box, data:{ ...

YuboonaZhang 2019-08-21 12:05 評(píng)論0 收藏0
Vue的事件處理方法

摘要：事件處理上一篇的條件渲染與列表渲染下一篇的表單輸入綁定事件監(jiān)聽指令可以用來(lái)監(jiān)聽事件來(lái)執(zhí)行一些代碼這個(gè)按鈕被點(diǎn)擊了次按鈕方法事件處理器許多事件處理的邏輯都很復(fù)雜，所以直接把代碼寫在指令中是不可行的。因此可以接收一個(gè)定義的方法來(lái)調(diào)用。事件處理上一篇：Vue的條件渲染與列表渲染：https://segmentfault.com/a/11...下一篇：Vue的表單輸入綁定：https://...

archieyang 2019-08-21 12:05 評(píng)論0 收藏0
vue2.0學(xué)習(xí)筆記（事件處理）

摘要：請(qǐng)記住，會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。而單單釋放也不會(huì)觸發(fā)事件。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。當(dāng)一個(gè)被銷毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 1、監(jiān)聽事件用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...

bovenson 2019-08-23 18:35 評(píng)論0 收藏0
vue的TodoMVC事例總結(jié)

摘要：縮寫為數(shù)據(jù)鍵盤事件添加事項(xiàng)指令指令監(jiān)聽事件。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回值的時(shí)候被渲染。清空已辦事項(xiàng)全選取消全選方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。 gitHub地址：https://github.com/gaozhixiao... 功能拆分：渲染數(shù)據(jù) 鍵盤事件：添加事項(xiàng) 鼠標(biāo)點(diǎn)擊事件：移除事項(xiàng) 顯示未辦事項(xiàng)數(shù)據(jù) 全部事項(xiàng)、未辦事項(xiàng)、已辦事項(xiàng)狀態(tài)切換清除全部完成...

CKJOKER 2019-08-26 10:10 評(píng)論0 收藏0
1-4. Vue.js核心知識(shí)之事件處理

摘要：我們可以用指令監(jiān)聽事件，并在觸發(fā)時(shí)運(yùn)行一些代碼。點(diǎn)擊按鈕，后面的函數(shù)會(huì)把參數(shù)帶入執(zhí)行，彈窗顯示點(diǎn)擊計(jì)算事件修飾符事件處理程序中經(jīng)常會(huì)用到或，這里幫我們很容易的就實(shí)現(xiàn)了。我們可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。監(jiān)聽事件點(diǎn)擊次數(shù)加1 你已經(jīng)點(diǎn)了 {{ counter }} 次了 new Vue({ el: ...

darkbaby123 2019-08-23 18:00 評(píng)論0 收藏0