鼠標事件 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 鼠標事件 ### 屬性 #### 監聽功能鍵 * `altKey`屬性：Alt 鍵 * `ctrlKey`屬性：Ctrl 鍵 * `metaKey`屬性：Meta 鍵（Mac 鍵盤是一個四瓣的小花，Windows 鍵盤是 Windows 鍵） * `shiftKey`屬性：Shift 鍵 ``` // html <body onclick="showKey(event)"> // js function showKey(e) { console.log('ALT key pressed: ' + e.altKey); console.log('CTRL key pressed: ' + e.ctrlKey); console.log('META key pressed: ' + e.metaKey); console.log('SHIFT key pressed: ' + e.shiftKey); } ``` #### MouseEvent.button，MouseEvent.buttons 監聽鼠標按鈕類型 ``` // html <button onmouseup="whichButton(event)">點擊</button> // js var whichButton = function (e) { switch (e.button) { case 0: console.log('Left button clicked.'); break; case 1: console.log('Middle button clicked.'); break; case 2: console.log('Right button clicked.'); break; default: console.log('Unexpected code: ' + e.button); } } ``` MouseEvent.button: * 0：按下主鍵（通常是左鍵），或者該事件沒有初始化這個屬性（比如`mousemove`事件）。 * 1：按下輔助鍵（通常是中鍵或者滾輪鍵）。 * 2：按下次鍵（通常是右鍵）。 MouseEvent.buttons: 表示同時按下的那個鍵 * 1：二進制為`001`（十進制的1），表示按下左鍵。 * 2：二進制為`010`（十進制的2），表示按下右鍵。 * 4：二進制為`100`（十進制的4），表示按下中鍵或滾輪鍵。 ### 實例方法 #### MouseEvent.getModifierState() 檢測特定案件返回一個布爾值，有沒有按下特定的功能鍵。它的參數是一個表示 [功能鍵](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/getModifierState#Modifier_keys_on_Gecko)的字符串。 ``` document.addEventListener('click', function (e) { console.log(e.getModifierState('CapsLock')); }, false); ``` ## WheelEvent 滾輪接口 `var wheelEvent = new WheelEvent('wheel', options); ` 第一參數只能是 `wheel` * `deltaX`：數值，表示滾輪的水平滾動量，默認值是 0.0。 * `deltaY`：數值，表示滾輪的垂直滾動量，默認值是 0.0。 * `deltaZ`：數值，表示滾輪的 Z 軸滾動量，默認值是 0.0。 * `deltaMode`：數值，表示相關的滾動事件的單位，適用于上面三個屬性。`0`表示滾動單位為像素，`1`表示單位為行，`2`表示單位為頁，默認為`0`。 * ``` document.querySelector('body').addEventListener('wheel',function (e) { console.log(e); console.log(e.deltaX); console.log(e.deltaY); console.log(e.deltaZ); console.log(e.deltaMode); }) ```