vue.js禁用瀏覽器預設事件(以tab鍵為例)
阿新 • • 發佈:2019-02-07
一開始採用的是這種做法:監聽keydown事件,然後根據鍵值禁用預設事件,發現不可行,原始碼如下
mounted () { window.addEventListener('keydown', this.onClick) } onClick (val) { console.log('按下' + val.key) console.log('keycode:' + val.keyCode) console.log('thiscode:' + this.code) if (val.keyCode === 9) { console.log('tabfalse13') val.keyCode = 0 val.returnValue = false val.which = 0 val.preventDefault() val.stopPropagation() val.cancelBubble = true window.event.keyCode = 0 window.event.returnValue = false window.event.which = 0 window.event.preventDefault() window.event.stopPropagation() window.event.cancelBubble = true return false } }
原因可能是因為這裡傳入的val並不是原鍵盤事件,所以採取下面的方法發現是可以的
window.addEventListener('keydown', event => { console.log('按下' + event.key) console.log('keycode:' + event.keyCode) console.log('thiscode:' + this.code) if (event.keyCode === 9) { console.log('tabfalse13') event.preventDefault() } }
然後記得離開頁面要銷燬監聽
destroyed () {
window.removeEventListener('keydown', event => {
console.log(event.value)
event.preventDefault()
})
這樣的話按下tab鍵就不會在瀏覽器內切換了,只是有輸出