vue.js禁用浏览器默认事件(以tab键为例)
一开始采用的是这种做法:监听keydown事件,然后根据键值禁用默认事件,发现不可行,源码如下mounted () {window.addEventListener('keydown', this.onClick)}onClick (val) {console.log('按下' + val.key)console.log('keycode:' ...
·
一开始采用的是这种做法:监听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键就不会在浏览器内切换了,只是有输出
更多推荐
已为社区贡献10条内容
所有评论(0)