js监听键盘+鼠标组合操作

  鉴于各种需求问题，有自己写了一个甘特图，比较简单，如果这个不符合大家需求，可以看看这个，代码可直接运行： https://www.cnblogs.com/pengfei-nie/p/13750505.html

  近期做一款甘特图的组件，想要实现 Ctrl + 滚轮  放大缩小甘特图时间最小刻度的功能，刚开始以为会有组合监听的办法，后来发现行不通，键盘和鼠标监听的方式不同。下面大致说一下实现方式。

1、按键监听：js无法做到同时监听，所以我们将监听按键的按下 、弹起状态，并保存。onkeydown  按下，将变量 ctrlDown  设置为 true，onkeyup  时设置为false，这里我监听的是Ctrl, 同理，如果想监听多按键，比如  Ctrl + Shift ， 就设置2个变量，皆为true代表按下了。

2、鼠标监听： 我这里监听的是滚轮，当然左右击、双击、移入移出都是一样的做法，只需要对指定dom做事件监听即可，注意页面注销时，removeEventListener 解绑事件。在鼠标事件监听里面，判断键盘监听变量的值，true 代表正在按压状态。注意阻止浏览器的默认事件。

 

这样就实现了组合操作的监听，希望对你有帮助。ps：测试数据有些烂，见谅

<template>
  <div class="c-gant"> </div>
</template>

<script>

  export default {
    data() { return {}; },
    methods: {
      // 监听 Ctrl + 滚轮，缩放甘特图
      lisenScrol() {
        let w = this
        document.onkeydown = function(e) {
          console.log(e)
          if (e.keyCode === 17) w.ctrlDown = true
        },
        document.onkeyup = function(e) {
          if (e.keyCode === 17) w.ctrlDown = false
        },
        document.getElementsByClassName('c-gant')[0].addEventListener('mousewheel',(e) => {
          e.preventDefault();
          if(w.ctrlDown) {
            let _newTimes = []
            if(e.wheelDeltaY > 0) {  // 放大
            } else {  // 缩小
            }
          }
        },false); 
      },
    },
  }
</script>