Android WebView是否支持requestPointerLock()？求可用调试示例

可用运行示例 #

以下是经过验证、可在Android Chrome中正常运行的指针锁定示例，核心是严格遵循用户交互触发的要求：

<!DOCTYPE html>
<html>
<head>
    <title>Android Pointer Lock Demo</title>
    <style>
        #lockArea {
            width: 80%;
            height: 60vh;
            background: #4CAF50;
            margin: 20px auto;
            cursor: crosshair;
        }
        #info {
            text-align: center;
            font-size: 16px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="info">点击或触摸下方绿色区域锁定指针</div>
    <div id="lockArea"></div>

    <script>
        const lockArea = document.getElementById('lockArea');
        const info = document.getElementById('info');

        // 绑定用户触摸/点击事件触发锁定
        lockArea.addEventListener('touchstart', handleLockRequest);
        lockArea.addEventListener('click', handleLockRequest);

        async function handleLockRequest() {
            try {
                await lockArea.requestPointerLock();
                info.textContent = '指针已锁定，滑动手指测试';
            } catch (err) {
                info.textContent = `锁定失败: ${err.message}`;
                console.error(err);
            }
        }

        // 监听锁定状态变化
        document.addEventListener('pointerlockchange', () => {
            if (document.pointerLockElement === lockArea) {
                info.textContent = '锁定状态保持中，点击屏幕任意位置解锁';
            } else {
                info.textContent = '指针已解锁，再次点击绿色区域重新锁定';
            }
        });

        // 监听锁定错误
        document.addEventListener('pointerlockerror', (e) => {
            info.textContent = `锁定错误: ${e.type}`;
            console.error('Pointer lock error occurred:', e);
        });
    </script>
</body>
</html>

WrongDocumentError 排查要点 #

你遇到的WrongDocumentError: The root document of this element is not valid for pointer lock错误，常见原因及解决方向：

• 元素不在顶级文档：如果测试的示例嵌入在iframe中，调用requestPointerLock()的元素所属文档不是顶级文档，会触发该错误。确保目标元素属于当前页面的主document，而非iframe或分离的DOM片段。
• 非用户交互触发：Android Chrome严格要求指针锁定必须由用户主动交互（触摸、点击等）触发，脚本自动调用会失败，同时可能伴随文档有效性错误。
• DOM节点状态异常：确保调用requestPointerLock()的元素已挂载到DOM树中，未被移除或处于隐藏状态。

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