鑒于各種需求問題,有自己寫了一個甘特圖,比較簡單,如果這個不符合大家需求,可以看看這個,代碼可直接運作: 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:測試資料有些爛,見諒
