在 webview 面板中对元素的后续点击不会通过 vscode api

Question

我正在我的 vscode 扩展程序中创建以下网络视图面板：

webviewPanel = window.createWebviewPanel(
    this.id,
    title,
    viewColumn,
    {
        enableScripts: true,
    }
);

webviewPanel.webview.onDidReceiveMessage(props => console.log(props));

const nonce = getNonce();
webviewPanel.webview.html = `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="default-src 'none'; style-src ${this.webviewPanel.webview.cspSource}; script-src 'nonce-${nonce}';">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="${embeddedFile("panel.css")}" rel="stylesheet">
</head>
<body>
    <button id="btn">Click Me</button>
    <script nonce="${nonce}" type="text/javascript" src="${embeddedFile("panel.js")}"></script>
</body>
</html>`;

panel.js的内容：

const filePathAnchor = document.getElementById("btn");
filePathAnchor.addEventListener('click', () => {
    const vscode = acquireVsCodeApi();
    vscode.postMessage({
        command: "click"
    });
});

单击面板中的按钮时，将按预期执行回调并记录 {command: "click"}。然而，据我所知，任何后续点击都会被忽略。在 js 文件中添加任何 console 都不会在我能找到的任何地方打印。

Answer 1

将 panel.js 更改为以下内容解决了该行为（仅调用 acquireVsCodeApi 一次）。仍然不知道为什么。

const vscode = acquireVsCodeApi();

const filePathAnchor = document.getElementById("btn");
filePathAnchor.addEventListener('click', () => {
    vscode.postMessage({
        command: "click"
    });
});

在 webview 面板中对元素的后续点击不会通过 vscode api

Subsequent clicks on an element in webview panel are not passed through vscode api

webview

vscode-extensions