¿Cómo puedo desencadenar un clic de evento de JavaScript?

8 minutos de lectura

¿Como puedo desencadenar un clic de evento de JavaScript
usuario171523

Tengo un hipervínculo en mi página. Estoy tratando de automatizar una cantidad de clics en el hipervínculo con fines de prueba. ¿Hay alguna forma de simular 50 clics en el hipervínculo usando JavaScript?

<a href="#" target="_blank" onclick="javascript:Test("Test");">MSDN</a>

Estoy buscando el activador de eventos onClick del JavaScript.

¿Como puedo desencadenar un clic de evento de JavaScript
instancia de mi

Haciendo un solo clic en un elemento HTML: simplemente hazlo element.click(). La mayoría de los principales navegadores admiten esto.


Para repetir el clic más de una vez: Agregue una ID al elemento para seleccionarlo de forma única:

<a href="#" target="_blank" id="my-link" onclick="javascript:Test('Test');">Google Chrome</a>

y llama al .click() método en su código JavaScript a través de un bucle for:

var link = document.getElementById('my-link');
for(var i = 0; i < 50; i++)
   link.click();

  • NB esto es para fines de prueba rápida. Para obtener una solución de navegador cruzado más robusta y compatible con los estándares, consulte la respuesta de Juan.

    – instancia de mí

    02/09/2014 a las 11:52

  • No entiendo el bucle y esto no funcionó en el móvil.

    – im_benton

    11/01/2016 a las 22:33

  • @im_benton: El ciclo fue para las necesidades específicas de OP. Si solo necesita activar un evento de clic, puede omitir la línea que comienza con for(.

    – rinogo

    7 julio 2017 a las 17:35

  • ¿Cómo se puede dar la misma identificación a más de un elemento? Esto no es correcto. use el selector de clase para realizar su tarea. más de un elemento puede tener la misma clase. pero más de un elemento no puede tener el mismo valor de identificación

    – Parag

    12 de noviembre de 2021 a las 6:08

  • @Parag: Léalo de nuevo. El bucle es hacer clic en el mismo enlace 50 veces, que es lo que hace.

    – Devin Burke

    13 de enero a las 22:17

1646752395 825 ¿Como puedo desencadenar un clic de evento de JavaScript
Juan Mendes

ACTUALIZAR

Esta era una respuesta antigua. Hoy en día solo deberías usar hacer clic. Para disparos de eventos más avanzados, use DispatchEvent.

const body = document.body;

body.addEventListener('click', e => {
  console.log('clicked body');
});

console.log('Using click()');
body.click();

console.log('Using dispatchEvent');
body.dispatchEvent(new Event('click'));

Respuesta Original

Esto es lo que uso: http://jsfiddle.net/mendesjuan/rHMCy/4/

Actualizado para trabajar con IE9+

/**
 * Fire an event handler to the specified node. Event handlers can detect that the event was fired programatically
 * by testing for a 'synthetic=true' property on the event object
 * @param {HTMLNode} node The node to fire the event handler on.
 * @param {String} eventName The name of the event without the "on" (e.g., "focus")
 */
function fireEvent(node, eventName) {
    // Make sure we use the ownerDocument from the provided node to avoid cross-window problems
    var doc;
    if (node.ownerDocument) {
        doc = node.ownerDocument;
    } else if (node.nodeType == 9){
        // the node may be the document itself, nodeType 9 = DOCUMENT_NODE
        doc = node;
    } else {
        throw new Error("Invalid node passed to fireEvent: " + node.id);
    }

     if (node.dispatchEvent) {
        // Gecko-style approach (now the standard) takes more work
        var eventClass = "";

        // Different events have different event classes.
        // If this switch statement can't map an eventName to an eventClass,
        // the event firing is going to fail.
        switch (eventName) {
            case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead.
            case "mousedown":
            case "mouseup":
                eventClass = "MouseEvents";
                break;

            case "focus":
            case "change":
            case "blur":
            case "select":
                eventClass = "HTMLEvents";
                break;

            default:
                throw "fireEvent: Couldn't find an event class for event '" + eventName + "'.";
                break;
        }
        var event = doc.createEvent(eventClass);
        event.initEvent(eventName, true, true); // All events created as bubbling and cancelable.

        event.synthetic = true; // allow detection of synthetic events
        // The second parameter says go ahead with the default action
        node.dispatchEvent(event, true);
    } else  if (node.fireEvent) {
        // IE-old school style, you can drop this if you don't need to support IE8 and lower
        var event = doc.createEventObject();
        event.synthetic = true; // allow detection of synthetic events
        node.fireEvent("on" + eventName, event);
    }
};

Tenga en cuenta que llamar fireEvent(inputField, 'change'); no significa que realmente cambiará el campo de entrada. El caso de uso típico para activar un evento de cambio es cuando establece un campo mediante programación y desea que se llame a los controladores de eventos desde que llama input.value="Something" no activará un evento de cambio.

  • ¡Hola, Juan! Su ejemplo no define JSUtil.NodeTypes.DOCUMENT_NODE

    – Kato

    13 mayo 2011 a las 21:52

  • Sé que la pregunta es sobre hacer clic en eventos, pero usted proporcionó un código genérico aquí y puedo ver que los eventos de cambio no se activarán (lo probé y esto realmente no funciona para tales eventos). Para desencadenar eventos de cambio, tuve que usar la función de activación de jquery.

    -Aleksander Lech

    1 de febrero de 2016 a las 16:58

  • @AleksanderLech Simplemente disparar un evento no garantiza que la acción se lleve a cabo. Lo hace por clic, no por cambio. El caso de uso para eventos en los que el cambio no funciona es cuando desea realizar un cambio en su valor, pero desea que se llame a todos los controladores de eventos de cambio (ya sea que se hayan configurado con jQuery O no). Puedo brindarle una ayuda más significativa si hace una nueva pregunta con el código exacto que estaba intentando pero no funcionó.

    – Juan Mendes

    1 de febrero de 2016 a las 17:38

  • Gracias por la rápida respuesta. Pude ejecutar el evento de cambio después de algunas modificaciones a su fragmento: 1) var node = document.getElementById(originalEvent.srcElement.id); 2) evento.initEvent(nombreEvento, verdadero, verdadero); //No sé por qué deshabilitó el burbujeo para eventos de cambio. Por favor, dígame lo que usted piensa.

    -Aleksander Lech

    2 de febrero de 2016 a las 9:47


  • Para cualquiera que enfrente los mismos problemas que yo: usar el.dispatchEvent(new Event('click')) no burbujeará. Para que eso funcione, debe especificar el comportamiento de “burbuja” en el constructor de eventos: new Event('click', { bubble: true })

    – nicojs

    11 de noviembre de 2021 a las 7:45

1646752397 452 ¿Como puedo desencadenar un clic de evento de JavaScript
黄雨伞

Qué

 l.onclick();

hace exactamente llamar al onclick funcion de les decir, si ha configurado uno con l.onclick = myFunction;. Si no ha configurado l.onclick, no hace nada. A diferencia de,

 l.click();

simula un clic y activa todos los controladores de eventos, ya sea que se agreguen con l.addEventHandler('click', myFunction);en HTML o de cualquier otra forma.

  • FWIW esto solo funciona en un nivel de elemento. Si agrega un evento de clic al window objeto, no expondrá mágicamente un window.click función.

    –James Donnelly

    20 de marzo de 2017 a las 10:42

  • @JamesDonnelly No tiene que ver con los controladores adjuntos, no todos los elementos admiten el método de clic, solo los que heredan HTMLElement.hacer clic La ventana no es un HTMLElement

    – Juan Mendes

    25 de agosto de 2020 a las 18:05

Estoy bastante avergonzado de que haya tantas aplicabilidades parciales incorrectas o no reveladas.

La forma más fácil de hacer esto es a través de Chrome u Opera (mis ejemplos usarán Chrome) usando la Consola. Ingrese el siguiente código en la consola (generalmente en 1 línea):

var l = document.getElementById('testLink');
for(var i=0; i<5; i++){
  l.click();
}

Esto generará el resultado requerido.

¿Como puedo desencadenar un clic de evento de JavaScript
Manolo

.click() no funciona con Android (mira documentos de mozilla, en la sección móvil). Puede desencadenar el evento de clic con este método:

function fireClick(node){
    if (document.createEvent) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if (document.createEventObject) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function') {
        node.onclick(); 
    }
}

Desde esta publicación

  • Estaba probando el clic de activación de jQuery, pero descubrí que termina llamando a la devolución de llamada en lugar de enviar el evento real en el DOM. @manolo tu método es correcto.

    – Akshay Gundewar

    4 de mayo de 2017 a las 9:07

  • .click() no funciona con Android” En realidad, la última tabla dice “Compatibilidad desconocida”.

    – Gaurang Tandon

    30 de junio de 2018 a las 13:52

Usar un marco de prueba

Esto podría ser útil – http://seleniumhq.org/ – Selenium es un sistema de prueba automatizado de aplicaciones web.

Puedes crear pruebas usando el plugin de Firefox IDE de selenio

Activación manual de eventos

Para activar eventos manualmente de la manera correcta, deberá usar diferentes métodos para diferentes navegadores, ya sea el.dispatchEvent o el.fireEvent donde el será su elemento ancla. Creo que ambos requerirán la construcción de un objeto de evento para pasar.

La forma alternativa, no del todo correcta, rápida y sucia sería esta:

var el = document.getElementById('anchorelementid');
el.onclick(); // Not entirely correct because your event handler will be called
              // without an Event object parameter.

  • Estaba probando el clic de activación de jQuery, pero descubrí que termina llamando a la devolución de llamada en lugar de enviar el evento real en el DOM. @manolo tu método es correcto.

    – Akshay Gundewar

    4 de mayo de 2017 a las 9:07

  • .click() no funciona con Android” En realidad, la última tabla dice “Compatibilidad desconocida”.

    – Gaurang Tandon

    30 de junio de 2018 a las 13:52

1646752400 582 ¿Como puedo desencadenar un clic de evento de JavaScript
Fatih Hayrioğlu

IE9+

function triggerEvent(el, type){
    var e = document.createEvent('HTMLEvents');
    e.initEvent(type, false, true);
    el.dispatchEvent(e);
}

Ejemplo de uso:

var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');

Fuente: https://plainjs.com/javascript/events/trigger-an-event-11/

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad