调用emscripten_request_pointerlock返回UNKNOWN_TARGET等错误的求助

问题分析 #

你遇到的两个错误核心原因如下：

• -4 (EMSCRIPTEN_RESULT_UNKNOWN_TARGET)：传入的"screen"元素并非有效交互目标——Qt生成的<div id="screen">只是外层容器，实际接收输入、承载渲染内容的是内部的canvas元素，对应Qt窗口的winId()标识。
• -1 (EMSCRIPTEN_RESULT_NOT_SUPPORTED)：document不符合指针锁定的目标要求，或是页面未运行在安全上下文（非HTTPS/localhost环境），导致API被禁用。

解决方案 #

1. 使用Qt窗口对应的DOM元素作为目标 #

Qt for WASM中每个窗口会绑定一个唯一的DOM元素（通常是canvas），通过winId()可获取其ID，将这个ID作为emscripten_request_pointerlock的目标：

修改mousePressEvent代码：

void mousePressEvent(QMouseEvent *event) override
{
#ifdef Q_OS_WASM
    QString targetId = QString::number(winId());
    EMSCRIPTEN_RESULT result = emscripten_request_pointerlock(targetId.toUtf8().constData(), false);
    qDebug() << "调用结果:" << result << "目标ID:" << targetId;
#endif
}

2. 满足指针锁定前置条件 #

• 安全上下文要求：指针锁定API仅支持HTTPS协议或localhost环境，普通HTTP环境下会直接返回NOT_SUPPORTED。
• 用户交互上下文：必须在用户触发的同步事件回调中调用（如鼠标点击、键盘按下），你的mousePressEvent已经符合要求，不要将调用放到异步逻辑中。

3. 优化Pro文件配置 #

手动添加Emscripten的INCLUDEPATH可能引发版本兼容问题，Qt for WASM会自动配置相关路径，建议移除该行：

# wasm: INCLUDEPATH += "C:\emsdk\upstream\emscripten\cache\sysroot\include"

备选方案：直接调用原生DOM API #

如果Emscripten API仍存在异常，可通过EM_ASM直接调用浏览器原生指针锁定API：

void mousePressEvent(QMouseEvent *event) override
{
#ifdef Q_OS_WASM
    EM_ASM({
        const targetElement = document.getElementById(UTF8ToString($0));
        if (targetElement) {
            // 兼容不同浏览器的API前缀
            targetElement.requestPointerLock = targetElement.requestPointerLock 
                || targetElement.mozRequestPointerLock 
                || targetElement.webkitRequestPointerLock;
            if (targetElement.requestPointerLock) {
                targetElement.requestPointerLock();
            } else {
                console.error("当前浏览器不支持指针锁定");
            }
        } else {
            console.error("未找到目标元素");
        }
    }, winId());
#endif
}

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