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キーを押すとブラウザ内で切り替えられず、出力があるだけです