Javascript获取键盘鼠标及游戏手柄事件

  
键盘、鼠标事件

在1.0版本中我们的无人机是自动飞行的，就是规划好路线它自己就能飞行，后来增加了键盘和鼠标的交互，用键盘来控制飞行的方向，鼠标控制镜头的切换和焦距的变化，这部分的功能主要通过js的绑定事件来实现，代码如下

mounted () {
    document.addEventListener('keydown', this.onkeydown) // 绑定快捷键
    document.addEventListener('keyup', this.onkeyup)

    var oDiv = document.getElementById('iframeShadow')//这里是视频区域，只有鼠标在视频区域才支持鼠标事件
    //这里是因为Firefox使用的是DOMMouseScroll，其它浏览器是mousewheel
    this.addEvent(oDiv, 'mousewheel', this.onMouseWheel)
    this.addEvent(oDiv, 'DOMMouseScroll', this.onMouseWheel)
},
beforeDestroy () {
    document.removeEventListener('keydown', this.onkeydown) // 移除监听
    document.removeEventListener('keyup', this.onkeyup) // 移除监听
    clearInterval(this.controlTimer)
    this.controlTimer = null
},
onkeydown (e) {
        //这里的作用是为了兼容各类浏览器对键盘事件的支持
      const ev = e || event || window.event || window.arguments.callee.caller.arguments[0]
       if (ev && ev.keyCode === 38) {
         // 上
         console.log('上')
         this.controlCameraStatus('up')
       } else if (ev && ev.keyCode === 40) {
         console.log('下')
         // 下
         this.controlCameraStatus('down')
       } else if (ev && ev.keyCode === 37) {
         console.log('左')
         // 左
         this.controlCameraStatus('left')
       } else if (ev && ev.keyCode === 39) {
         console.log('右')
         // 右
         this.controlCameraStatus('right')
       } else if (ev && ev.keyCode === 67) {
         console.log('回正')
         // 右
         this.controlCameraStatus('center')
       }
    },
    onMouseWheel (ev) {
      /* 当鼠标滚轮事件发生时，执行一些操作 */
      var eve = ev || window.event
      var down = true // 定义一个标志，当滚轮向下滚时，执行一些操作
      down = eve.wheelDelta ? eve.wheelDelta < 0 : eve.detail > 0
      if (down) {
        // 向后
        dosomething....
      } else {
        // 向前
       dosomething....
      }
      if (eve.preventDefault) {
        /* FF 和 Chrome */
        eve.preventDefault() // 阻止默认事件
      }
      return false
    },
    addEvent (obj, xEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent('on' + xEvent, fn)
      } else {
        obj.addEventListener(xEvent, fn, false)
      }
    },
    removeEvent () {
      var obj = document.getElementById('iframeShadow')
      obj.addEventListener('mousewheel', this.onMouseWheel)
      obj.addEventListener('DOMMouseScroll', this.onMouseWheel)
    },

上面的代码就是绑定键盘事件和鼠标事件的过程,这是在vue中的大致写法

js获取手柄的按下事件
由于要增加手柄和页面的交互，那就要想办法捕获到手柄上的事件，但查阅了一些资料后发现js中并没有类似于获取键盘事件的方法来获取手柄事件，不过有一个属性可以捕获到电脑上是否插了手柄，那就是navigator.getGamepads属性，该属性包含的是一个数组，当没有检测到手柄时数组的值为[null, null, null, null]。如果有手柄那数组中的项就会包含Gamepad，也就是[Gamepad, null, null, null]。下面上代码

    //在vue中的写法，由于这个属性不像键盘事件那样按下的时候就能捕获到事件，所以需要一个定时器来一直查询着是否插入了手柄
    created () {
    this.controlTimer = setInterval(() => {
      this.gamepad = navigator.getGamepads()[0]
      console.log(navigator.getGamepads())
    }, 100)
  },

这是如果有手柄就会在控制台看到如下打印结果



这里的Gamepad就是一个手柄的所有参数，具体意义如下

标题	意义
axes	这个数组中的值代表手柄遥感操作的方向
buttons	这个数组中包含的17项分别对应手柄上的17个按钮
GamepadButton	手柄中单个按钮的对象
pressed	布尔值，false代表没有按下，true代表按下
touched	如果手柄支持触摸，代表当前按钮是否被触摸，不代表按下的状态，如果不支持触摸，该值和pressed一致
value	按键按下的深度，不过一般的手柄都不支持压力感应，所以一般情况下都是0或者1

 



     返回顶部