鼠标事件 · 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); }) ```