Simular un clic en JavaScript: click() y dispatchEvent()

Un cliente necesitaba que pulsar un enlace activara una pestaña de la interfaz. La solución fue despachar un evento hacia el elemento de destino. Pero hay una corrección importante respecto a mi explicación original: JavaScript no puede fabricar un clic humano de confianza.

Disparar el comportamiento de un elemento

Si quieres activar el clic de un botón, normalmente basta con:

const objetivo = document.getElementById('miObjetivo');
objetivo?.click();

Si necesitas configurar el evento, puedes construirlo explícitamente:

const objetivo = document.getElementById('miObjetivo');
if (objetivo) {
  const evento = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  const noCancelado = objetivo.dispatchEvent(evento);
  console.log(noCancelado);
}

dispatchEvent() devuelve false si un manejador cancela un evento cancelable mediante preventDefault(). No te dice si la pestaña terminó abierta ni si una operación asíncrona finalizó.

Lo que no consigue

El evento sintético tiene isTrusted === false. No sustituye la activación del usuario requerida para ciertas APIs del navegador. Tampoco basta con cambiar su nombre a «user-click» ni con usar jQuery.

Si la biblioteca de pestañas ofrece una API pública para activarlas, usaría esa API: expresa mejor la intención y evita depender de un clic artificial. Para un formulario, también hay que distinguir activar un botón de enviar el formulario y validar sus campos.

Referencia: Event.isTrusted.

Sigue leyendo

NODE.JS · WINDOWSInstalar Node.js en Windows sin permisos de administradorNode.js en Windows sin instalador ni permisos de administrador: el ZIP oficial en tu carpeta de usuario y el PATH en cmd o PowerShell, sin pasar por…Abrir →JAVASCRIPT · BÚSQUEDAJavaScript: 5 formas de saber si una cadena contiene otraEn una aplicación que consultaba eXist recibía fragmentos de HTML por Ajax y necesitaba detectar determinadas palabras. Eso me llevó a comparar…Abrir →JAVASCRIPT · STRINGSCómo borrar el último carácter de una cadena en JavaScriptCuando construyes una lista concatenando valores y comas, es fácil acabar con un separador de más. En JavaScript puedes quitarlo con slice() , aunque…Abrir →RUBY · SQLTraducir SQL a Active Record en Ruby on RailsUn amigo que estaba trasladando consultas de PHP a Ruby on Rails me pidió ayuda para contar ventas por cliente. La consulta parecía sencilla, pero el…Abrir →

Todas las guías de Desarrollo web y WordPress →