vue在某頁面監聽鍵盤輸入事件

需求:在某一網頁,通過上下左右鍵控制一些操作

 

實現:

1.基本代碼:

因為沒有綁定特定的元素.所以我們將事件綁定到document上.

 //當前頁面監視鍵盤輸入
        document.onkeydown = function(e) {
            console.log('但是噶')
            //事件對象兼容
            let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
            //鍵盤按鍵判斷:左箭頭-37;上箭頭-38；右箭頭-39;下箭頭-40
            //左
            if (e1 && e1.keyCode == 37) {
                this.decrease()
            } else if (e1 && e1.keyCode == 38) {
                this.nowStudent--
            } else if (e1 && e1.keyCode == 39) {
                this.increase()
            } else if (e1 && e1.keyCode == 40) {
                this.nowStudent++
            }
        }

 

2.何時何處綁定:

其他綁定特定元素的函數,都是直接綁定在行內,也就是說創建時就綁定了

<input @keyup.enter="function">

而我們則需要把這個事件綁定過程放在created鈎子中,理由很簡單.在這個鈎子里可以確定你想綁定的元素已經構建完成

created() {
        this.getHomework()
        //當前頁面監視鍵盤輸入
        document.onkeydown = function(e) {
            console.log('但是噶')
            //事件對象兼容
            let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
            //鍵盤按鍵判斷:左箭頭-37;上箭頭-38；右箭頭-39;下箭頭-40
            //左
            if (e1 && e1.keyCode == 37) {
                this.decrease()
            } else if (e1 && e1.keyCode == 38) {
                this.nowStudent--
            } else if (e1 && e1.keyCode == 39) {
                this.increase()
            } else if (e1 && e1.keyCode == 40) {
                this.nowStudent++
            }
        }
    },

 

3.this指向修正

完成以上兩步,還不行.會報錯.this.getHomework正常,console.log也會執行,但是onkeydown的this會出錯.

Uncaught TypeError: this.decrease is not a function

原因是created鈎子里的this是vue對象,但是,onkerdown這個函數本身又形成了一個"作用域",this指向了調用onkeydown的對象.而onkeydown里面的decrease()是methods里面的一個函數,所以this的指向出錯

解決方案

用一個全局變量把this保存起來再用

created() {
        this.getHomework()
        var that = this
        //當前頁面監視鍵盤輸入
        document.onkeydown = function(e) {//事件對象兼容
            let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
            //鍵盤按鍵判斷:左箭頭-37;上箭頭-38；右箭頭-39;下箭頭-40
            //左
            if (e1 && e1.keyCode == 37) {
                that.decrease()
            } else if (e1 && e1.keyCode == 38) {
                that.nowStudent--
            } else if (e1 && e1.keyCode == 39) {
                that.increase()
            } else if (e1 && e1.keyCode == 40) {
                that.nowStudent++
            }
        }
    }