第十六章 Web前端中鼠标键盘等事件处理

本文大部分配图使用微信小程序【字形绘梦】免费生成。

AIGC技术讨论群

在类似远程桌面控制等场景下，我们的流式系统还需要处理键盘和鼠标的输入。

主要流程

1.增加键盘鼠标监听回调dom对象的事件回调

2.如果需要和后端交互，可以在数据通道约定对应的协议，然后处理键盘和鼠标映射关系，传输给对等端

3.对等端接受数据以后处理

第十六章 Web前端中鼠标键盘等事件处理

键盘输入处理

键盘事件

键盘事件由用户击打键盘触发，主要有keydown、keypress、keyup三个事件，它们都继承了KeyboardEvent接口

keydown：按下键盘时触发。
keypress：按下有值的键时触发，即按下 Ctrl、Alt、Shift、Meta 这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件
keyup：松开键盘时触发该事件

特别地：如果用户一直按键不松开，就会连续触发键盘事件，触发的顺序如下

keydown
keypress
keydown
keypress
（重复以上过程）
keyup

KeyboardEvent 接口

KeyboardEvent接口用来描述用户与键盘的互动

KeyboardEvent构造函数接受两个参数。第一个参数是字符串，表示事件类型第二个参数是一个事件配置对象，该参数可选。除了Event接口提供的属性

当然，Event接口提供的属性，还可以配置以下字段，都是可选的～

key：字符串，当前按下的键，默认为空字符串
code：字符串，表示当前按下的键的字符串形式，默认为空字符串
location：整数，当前按下的键的位置，默认为0
ctrlKey：布尔值，是否按下 Ctrl 键，默认为false
shiftKey：布尔值，是否按下 Shift 键，默认为false。
altKey：布尔值，是否按下 Alt 键，默认为false
metaKey：布尔值，是否按下 Meta 键，默认为false
repeat：布尔值，是否重复按键，默认为false

KeyboardEvent 实例属性

只读属性，以下都会返回一个布尔值：

KeyboardEvent.altKey：是否按下 Alt 键
KeyboardEvent.ctrlKey：是否按下 Ctrl 键
KeyboardEvent.metaKey：是否按下 meta 键（Mac 系统是command，Windows 系统是 windows 键）
KeyboardEvent.shiftKey：是否按下 Shift 键

例如：

function showChar(e) {  
    console.log('ALT: ' + e.altKey);  
    console.log('CTRL: ' + e.ctrlKey);  
    console.log('Meta: ' + e.metaKey);  
    console.log('Shift: ' + e.shiftKey);
 }
 
 document.body.addEventListener('keydown', showChar, false);

鼠标输入处理

鼠标点击事件

鼠标点击相关的有四个事件：

click：按下鼠标（通常是按下主按钮）时触发
dblclick：在同一个元素上双击鼠标时触发
mousedown：按下鼠标键时触发
mouseup：释放按下的鼠标键时触发

鼠标移动事件

鼠标移动相关的有五个事件：

mousemove：当鼠标在一个节点内部移动时触发。当鼠标持续移动时，该事件会连续触发。为了避免性能问题，建议对该事件的监听函数做一些限定，比如限定一段时间内只能运行一次
mouseenter：鼠标进入一个节点时触发，进入子节点不会触发这个事件（详见后文）
mouseover：鼠标进入一个节点时触发，进入子节点会再一次触发这个事件（详见后文）
mouseout：鼠标离开一个节点时触发，离开父节点也会触发这个事件（详见后文）
mouseleave：鼠标离开一个节点时触发，离开父节点不会触发这个事件（详见后文）

MouseEvent 接口

MouseEvent接口代表了鼠标相关的事件，单击（click）、双击（dblclick）、松开鼠标键（mouseup）、按下鼠标键（mousedown）等动作，所产生的事件对象都是MouseEvent实例

screenX：数值，鼠标相对于屏幕的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
screenY：数值，鼠标相对于屏幕的垂直位置（单位像素），其他与screenX相同。
clientX：数值，鼠标相对于程序窗口的水平位置（单位像素），默认值为0，设置该属性不会移动鼠标。
clientY：数值，鼠标相对于程序窗口的垂直位置（单位像素），其他与clientX相同。
ctrlKey：布尔值，默认值为false，是否同时按下了 Ctrl 键
shiftKey：布尔值，默认值为false是否同时按下了 Shift 键
altKey：布尔值，默认值为false，是否同时按下 Alt 键
metaKey：布尔值，默认值为false，是否同时按下 Meta 键
button：数值，表示按下了哪一个鼠标按键，默认值为0，表示按下主键（通常是鼠标的左键）或者当前事件没有定义这个属性；1表示按下辅助键（通常是鼠标的中间键），2表示按下次要键（通常是鼠标的右键）。
buttons：数值，表示按下了鼠标的哪些键，是一个三个比特位的二进制值，默认为0（没有按下任何键）。1（二进制001）表示按下主键（通常是左键），2（二进制010）表示按下次要键（通常是右键），4（二进制100）表示按下辅助键（通常是中间键）。因此，如果返回3（二进制011）就表示同时按下了左键和右键。
relatedTarget：节点对象，表示事件的相关节点，默认为null。mouseenter和mouseover事件时，表示鼠标刚刚离开的那个元素节点；mouseout和mouseleave事件时，表示鼠标正在进入的那个元素节点

指针锁定方式

Pointer Lock API是HTML5提供的一种API，可以锁定鼠标指针在浏览器窗口中，使其在游戏或其他交互应用程序中表现更自然。

什么是Pointer Lock？

Pointer Lock API允许游戏开发人员锁定光标在游戏中，这对于第一人称视角的游戏尤其有用。此API将鼠标指针锁定到特定元素上（同时将指针光标从视图中移除），并获取原始的指针位移，这样就能不受元素边界的约束而无限移动，且不会移出元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pointer Lock Example</title>
</head>
<body>
    <div id="game-container">
        <button id="start-game">Start Game</button>
        <p>Click the button to start the game and lock the pointer.</p>
    </div>

    <script>
        let gameContainer = document.getElementById('game-container');
        let startGameButton = document.getElementById('start-game');

        gameContainer.onclick = function() {
            gameContainer.requestPointerLock();
        }

        document.addEventListener('pointerlockchange', lockChangeAlert, false);
        document.addEventListener('mozpointerlockchange', lockChangeAlert, false);
        document.addEventListener('webkitpointerlockchange', lockChangeAlert, false);

        function lockChangeAlert() {
            if (document.pointerLockElement === gameContainer ||
                document.mozPointerLockElement === gameContainer ||
                document.webkitPointerLockElement === gameContainer) {
                console.log('Pointer Lock enabled');
                // 在此处启动游戏逻辑
            } else {
                console.log('Pointer Lock disabled');
                // 在此处处理禁用Pointer Lock时的逻辑
            }
        }
    </script>
</body>
</html>

第十六章 Web前端中鼠标键盘等事件处理