tab vue 禁用_vue.js禁用浏览器默认事件（以tab键为例）

一开始采用的是这种做法：监听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键就不会在浏览器内切换了，只是有输出