如何将cursor移动范围限制在Panel区域？支持两次点击触发逻辑

嘿，这个需求其实用浏览器自带的Pointer Lock API就能完美解决，我给你整理了一套可直接运行的方案，包含详细的注释和说明：

核心思路 #

我们需要通过全局点击事件维护一个锁定状态，配合Pointer Lock API实现功能：

• 第一次点击鼠标时：把光标定位到目标Panel，然后锁定光标只能在这个区域内移动
• 第二次点击鼠标时：解除光标锁定，恢复正常的鼠标移动范围

完整代码示例 #

首先是基础的HTML结构，我们定义一个可视化的Panel区域：

<!DOCTYPE html>
<html>
<head>
    <style>
        .panel {
            width: 400px;
            height: 300px;
            border: 2px solid #333;
            background-color: #f0f0f0;
            margin: 50px auto;
            text-align: center;
            padding-top: 100px;
            font-size: 18px;
        }
        body {
            min-height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="panel" id="targetPanel">
        点击页面任意位置开始锁定光标到本区域<br>
        再次点击解除锁定
    </div>

    <script>
        // 获取目标Panel元素
        const panel = document.getElementById('targetPanel');
        // 状态变量：标记是否处于光标锁定状态
        let isLocked = false;

        // 全局点击事件监听
        document.addEventListener('click', () => {
            if (!isLocked) {
                // 第一次点击：锁定光标到Panel
                panel.requestPointerLock();
                // 主动将光标定位到Panel中心（优化用户体验）
                const rect = panel.getBoundingClientRect();
                const centerX = rect.left + rect.width / 2;
                const centerY = rect.top + rect.height / 2;
                // 模拟中心点击触发光标定位（部分浏览器需用户交互触发锁定）
                const clickEvent = new MouseEvent('click', {
                    clientX: centerX,
                    clientY: centerY
                });
                panel.dispatchEvent(clickEvent);
                isLocked = true;
                panel.textContent = '光标已锁定在本区域，再次点击解除';
            } else {
                // 第二次点击：解除光标锁定
                document.exitPointerLock();
                isLocked = false;
                panel.textContent = '点击页面任意位置开始锁定光标到本区域<br>再次点击解除锁定';
            }
        });

        // 监听光标锁定状态变化，同步本地状态
        document.addEventListener('pointerlockchange', () => {
            isLocked = document.pointerLockElement === panel;
        });
    </script>
</body>
</html>

关键代码解释 #

• requestPointerLock()：调用该方法可将光标锁定在目标元素内，此时光标会隐藏，鼠标移动仅触发该元素的mousemove事件，坐标以元素为基准
• exitPointerLock()：解除光标锁定，恢复正常鼠标行为
• pointerlockchange事件：监听系统层面的光标锁定状态变化，确保本地状态与实际状态一致
• 光标定位优化：第一次点击时主动将光标移到Panel中心，避免光标停留在页面其他位置的突兀感

注意事项 #

• 光标锁定必须由用户交互触发（比如点击），这是浏览器的安全限制，所以逻辑必须基于用户点击事件
• 部分浏览器要求HTTPS环境才能使用Pointer Lock API，但本地开发的localhost不受此限制

内容的提问来源于stack exchange，提问作者Matej