2010-03-04 16 views
120

Tengo un hipervínculo en mi página. Estoy intentando automatizar una cantidad de clics en el hipervínculo para fines de prueba. ¿Hay alguna forma de simular 50 clics en el hipervínculo usando JavaScript?Cómo puedo activar un evento de JavaScript, haga clic en

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

Estoy buscando onClick evento desencadenar desde el JavaScript.

Respuesta

164

Añadir una identificación para su enlace

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

y lo llaman en su código javascript:

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

NB esto es para el propósito de prueba rápida. Para una solución de navegadores cruzados más robusta, compatible con estándares, consulte la respuesta de Juan. –

+2

No entiendo el ciclo y esto no funcionó en el dispositivo móvil. –

+0

@im_benton: El ciclo era para las necesidades específicas de OP. Si sólo necesita para desencadenar un evento de clic, se puede omitir la línea que comienza con 'por ('. – rinogo

8

Utilice un marco de pruebas

Esto podría ser útil - http://seleniumhq.org/ - El selenio es un sistema de pruebas automatizadas de aplicaciones web.

Puede crear pruebas utilizando el plugin de Firefox Selenium IDE

Manual de disparos de eventos

para disparar manualmente eventos de la manera correcta, se tendrá que utilizar diferentes métodos para diferentes navegadores - ya sea el.dispatchEvent o el.fireEvent donde el será su elemento Ancla. . Creo que ambos de estos pasos requiere la construcción de un objeto de evento para transmitirlo en

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

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

Esto es lo que yo 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 en realidad va a cambiar el campo de entrada. El caso de uso típico para disparar un evento de cambio es cuando configura un campo mediante programación y desea llamar a los controladores de eventos ya que al llamar al input.value="Something" no se activará un evento de cambio.

+0

Hola Juan! Tu ejemplo no define JSUtil.NodeTypes.DOCUMENT_NODE – Kato

+0

Sé que la pregunta se refiere a los acontecimientos que hacen clic, pero proporcionado un código genérico aquí y lo que puedo ver los eventos de cambio no van a ser despedidos (he comprobado y esto realmente no funciona para este tipo de eventos). para activar los eventos de cambio que tenía que utilizar la función de jQuery gatillo. –

+0

@AleksanderLech Justo disparar un evento no garantiza que la acción se llevará a cabo. se hace por clic, no lo hace para el cambio. el caso de uso para eventos donde el cambio no funciona es cuando se desea realizar un cambio en su valor, pero desea todos los manejadores de cambio de eventos a ser llamados (ya sea que se establecieron con 'jQuery' o no). puedo proporcionar ayuda más significativa si le preguntas a una nueva pregunta con el código exacto que estaba tratando, pero no estaba funcionando. –

19

Estoy bastante avergonzado de que haya tantas aplicaciones parciales incorrectas o no divulgadas.

La forma más fácil de hacerlo es a través de Chrome u Opera (mis ejemplos usarán Chrome) usando la consola. Introduzca el código siguiente 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

+1

¿Por qué llama 'click()' 5 veces en lugar de solo una vez? Vi "instanceof me" hizo lo mismo con 'onclick()'. – Seeven

+1

@SeevenByakko porque la pregunta original era sobre la simulación de "varios clics". De hecho, dijo 50, pero con suerte cambiar el código anterior de 5 a 50 es obvio para cualquiera :) –

32

Lo

l.onclick(); 

hace es llamar exactamente la función onclick de l, que es decir, si ha establecido uno con l.onclick = myFunction;. Si no ha configurado l.onclick, no hace nada.Por el contrario,

l.click(); 

simula un clic y dispara todos los controladores de eventos, ya sea con l.addEventHandler('click', myFunction); añadió, en HTML, o de cualquier otra manera.

+0

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

1

Feria de advertencia:

element.onclick() no se comporta como se esperaba. Solo ejecuta el código dentro de onclick="" attribute, pero no activa el comportamiento predeterminado.

tuve problema similar con el botón de radio no establecer a comprobar, a pesar de que onclick función personalizada se ejecuta bien. Tuve que agregar radio.checked = "true"; para configurarlo. Probablemente lo mismo pasa con y para otros elementos (después a.onclick() debe haber también window.location.href = "url";)

+0

De hecho, usar 'onclick()' significaría que el objeto 'event' no se definirá automáticamente por el navegador, por lo que los métodos comunes como' event.stopPropagation() 'tampoco estarán definidos. – Boaz

-9
angular.element(document.querySelector('selector'))[0].click() 

funciona para mí!

+4

Para que esto funcione necesitarás AngularJS. –

7

.click() no funciona con Android (mirar mozilla docs, en la sección móvil). Puede desencadenar el evento click 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(); 
    } 
} 

De this post

+0

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

-9

Uso jQuery

$(node).trigger("click"); 
Cuestiones relacionadas