Come posso triggersre un clic su un evento JavaScript

Ho un collegamento ipertestuale nella mia pagina. Sto cercando di automatizzare un numero di clic sul collegamento ipertestuale a scopo di test. C’è un modo per simulare 50 clic sul collegamento ipertestuale usando JavaScript?

MSDN 

Sto cercando il trigger di evento onClick da JavaScript.

Eseguendo un singolo clic su un elemento HTML: semplicemente fai element.click() . La maggior parte dei principali browser supporta questo .


Per ripetere il clic più di una volta: aggiungi un ID all’elemento per selezionarlo in modo univoco:

 Google Chrome 

e chiama il metodo .click() nel tuo codice JavaScript tramite un ciclo for:

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

Ecco cosa uso: http://jsfiddle.net/mendesjuan/rHMCy/4/

Aggiornato per funzionare 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" (eg, "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 classs. // 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); } }; 

Si noti che chiamando fireEvent(inputField, 'change'); non significa che cambierà effettivamente il campo di input. Il tipico caso d’uso per l’triggerszione di un evento change è quando si imposta un campo a livello di input.value="Something" e si desidera che i gestori di eventi vengano chiamati poiché input.value="Something" non attiverà un evento change.

Che cosa

  l.onclick(); 

fa esattamente chiamando la funzione onclick di l , cioè se ne hai impostato uno con l.onclick = myFunction; . Se non hai impostato l.onclick , non fa nulla. In contrasto,

  l.click(); 

simula un clic e l.addEventHandler('click', myFunction); tutti i gestori di eventi, sia aggiunti con l.addEventHandler('click', myFunction); , in HTML o in altro modo.

Mi vergogno abbastanza che ci siano così tante applicabilità parziali errate o segrete.

Il modo più semplice per farlo è tramite Chrome o Opera (i miei esempi utilizzeranno Chrome) utilizzando la Console. Inserire il seguente codice nella console (generalmente in 1 riga):

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

Questo genererà il risultato richiesto

.click() non funziona con Android (guarda i documenti di Mozilla , nella sezione mobile). Puoi triggersre l’evento click con questo metodo:

 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(); } } 

Da questo post

Utilizzare un framework di test

Questo potrebbe essere utile – http://seleniumhq.org/ – Il selenium è un sistema di test automatizzato dell’applicazione web.

È ansible creare test utilizzando il plug-in Firefox Selenium IDE

Sparo manuale di eventi

Per el.dispatchEvent manualmente gli eventi nel modo corretto è necessario utilizzare metodi diversi per i diversi browser: el.dispatchEvent o el.fireEvent dove el sarà il tuo elemento di ancoraggio. Credo che entrambi richiederanno la costruzione di un object Event da passare.

Il modo alternativo, non del tutto corretto, veloce e sporco sarebbe questo:

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

Giusto avvertimento:

element.onclick() non si comporta come previsto. Esegue solo il codice all’interno onclick="" attribute , ma non triggers il comportamento predefinito.

Ho riscontrato un problema simile con il pulsante di opzione che non è stato selezionato, anche se la funzione personalizzata onclick funzionava correttamente. radio.checked = "true"; aggiungere radio.checked = "true"; per impostarlo. Probabilmente lo stesso vale per altri elementi (dopo a.onclick() dovrebbe esserci anche window.location.href = "url"; )

IE9 +

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

Esempio di utilizzo:

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

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