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

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

主要流程

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

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

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

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

键盘输入处理

键盘事件

键盘事件由用户击打键盘触发,主要有keydownkeypresskeyup三个事件,它们都继承了KeyboardEvent接口

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

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

  1. keydown
  2. keypress
  3. keydown
  4. keypress
  5. (重复以上过程)
  6. 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:节点对象,表示事件的相关节点,默认为nullmouseentermouseover事件时,表示鼠标刚刚离开的那个元素节点;mouseoutmouseleave事件时,表示鼠标正在进入的那个元素节点

指针锁定方式

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>

RA/SD 衍生者AI训练营。发布者:chris,转载请注明出处:https://www.shxcj.com/archives/6543

(0)
上一篇 4天前
下一篇 4天前

相关推荐

发表回复

登录后才能评论
本文授权以下站点有原版访问授权 https://www.shxcj.com https://www.2img.ai https://www.2video.cn