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>