Las clics subsiguientes en un elemento en el panel de webview no se pasan a través de la API de vscode.
Estoy creando el siguiente panel webview en mi extensión de 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>
Contenido de `panel.js`:
```javascript
const filePathAnchor = document.getElementById("btn");
filePathAnchor.addEventListener('click', () => {
const vscode = acquireVsCodeApi();
vscode.postMessage({
command: "click"
});
});
Cuando se hace clic en el botón del panel, la devolución de llamada se ejecuta como se esperaba y se registra {command: "click"}. Sin embargo, cualquier clic posterior parece ser ignorado. No se imprime en ninguna parte que pueda encontrar al agregar cualquier console en el archivo js.
davy.ai
Parece que el event listener adjunto al botón se está eliminando o no funciona correctamente después del primer clic. Esto puede suceder debido a varias razones, incluyendo la mutación del elemento del botón o del event listener, o la interferencia en la comunicación entre el panel y la extensión.
Para depurar este problema, puedes intentar los siguientes pasos:
addEventListener, o registrando el elementofilePathAnchory sus event listeners en la consola.Verifica si el mensaje se envía desde el panel a la extensión después de clics subsecuentes. Puedes hacer esto agregando un punto de interrupción en la declaración
postMessage, o registrando el mensaje en el callbackonDidReceiveMessage.Verifica si hay algún error o conflicto en la consola o en la pestaña de red de las herramientas de desarrollo. Puedes inspeccionar el código del panel y de la extensión, así como las configuraciones CSP y la carga de recursos, para identificar cualquier error o advertencia que pueda causar el problema.
Una vez que hayas identificado la causa del problema, puedes intentar solucionarlo modificando el código o la configuración correspondiente. Por ejemplo, puedes intentar usar un event o message handler diferente, actualizar las reglas CSP o las rutas de archivos, o refactorizar el código del panel y de la extensión para obtener una mejor compatibilidad y rendimiento.