Come simulare un clic con JavaScript?


291

Mi sto solo chiedendo come posso usare JavaScript per simulare un clic su un elemento.

Attualmente ho:

<script type="text/javascript">
function simulateClick(control)
{
    if (document.all)
    {
        control.click();
    }
    else
    {
        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent('click', true, true, window, 1, 12, 345, 7, 220, false, false, true, false, 0, null );
        control.dispatchEvent(evObj);
    }
}
</script>

<a href="http://www.google.com" id="mytest1">test 1</a><br>

<script type="text/javascript">
    simulateClick(document.getElementById('mytest1'));
</script>

Ma non funziona :(

Qualche idea?


9
"Cinque errori di codifica più comuni": javascript.about.com/od/hintsandtips/a/worst_4.htm - Quasi nessuno esegue più IE4 e quindi non è più necessario il supporto per document.all DOM. È davvero sorprendente quante persone lo usino ancora nella loro codifica. Peggio ancora è il supporto per document.all DOM viene spesso testato per determinare il browser in uso e, se supportato, il codice presuppone che il browser sia Internet Explorer (che è un utilizzo completamente errato poiché Opera riconosce anche quel DOM) .
zaf

Risposte:


418

Ecco cosa ho preparato. È piuttosto semplice, ma funziona:

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}

Uso:

eventFire(document.getElementById('mytest1'), 'click');

12
@Anderson Green: ho aggiunto un esempio a questo jsfiddle: jsfiddle.net/KooiInc/W4BHD
KooiInc

4
Prova che funziona (in Chromium): +1 con document.querySelector('[value="2706236"]').nextSibling.nextSibling.dispatchEvent(ev);:)
Pointed Ears

58
Beh, ho provato la tua sceneggiatura java sul pulsante di votazione :) (ovviamente funzionato)
0

1
Per simulare il comportamento esatto dell'utente, dovresti avvolgere dispatchEvento le clickinvocazioni setTimeout, poiché sembra che dispatchEventsia sincrono .
Lev Kazakov,


392

Che dire di qualcosa di semplice come:

document.getElementById('elementID').click();

Supportato anche da IE.


@HermannIngjaldsson Sì, funziona perfettamente in IE - msdn.microsoft.com/en-us/library/ie/ms536363%28v=vs.85%29.aspx
Darren Sweeney,

6
La domanda era "funziona anche in ie?" - la risposta è sì - AFAIK almeno fino a 8, non ho controllato 7
Darren Sweeney,

24
Non esisteva prima? Perché le risposte del 2010 non menzionano questa semplice soluzione? Solo curioso ...
Parth,

3
@ NinoŠkopac Funziona alla grande attualmente per desktop, ma nessuna garanzia per lavorare con i browser mobili. Anche il sito degli sviluppatori mozilla non mostra supporto mobile.
le0diaz,

8
@Parth Forse lo ha fatto, semplicemente non ha fatto clic per loro.
Andrew

78

Hai preso in considerazione l'utilizzo di jQuery per evitare il rilevamento di tutti i browser? Con jQuery, sarebbe semplice come:

$("#mytest1").click();

21
Questo attiva solo i gestori di eventi jQuery, non il comportamento predefinito (in questo caso il browser passa a href)
Romuald Brunet,

12
Non so di triste, ma sicuramente può essere conveniente non dover continuare a ricodificare le stesse routine di rilevamento del browser più e più volte.
BradBrening,

9
@ErikAigner: Mi chiedevo lo stesso, ma sono contento che la risposta accettata in questo caso sia JavaScript e non jQuery. Visto troppe volte su SO. Ancora una volta: jQuery è JavaScript, ma JavaScript non è jQuery. Anche se mi piace usare jQuery, vedo sempre di più che gli sviluppatori non capiscono la vera cosa semplice. I miei 2 centesimi, non ho potuto resistere a commentare. ;)
Sander,

58
Ci sono anche molti umani che non saprebbero da dove cominciare se dovessero lavare i loro vestiti a mano, dal momento che la maggior parte delle famiglie possiede una lavatrice e quasi tutti hanno un'asciugatrice. jQuery, proprio come gli elettrodomestici moderni, ha reso una vecchia faccenda molto più semplice e meno soggetta a errori. Non è la soluzione per tutti, tuttavia, il downgrade di una risposta che risponde accuratamente alla domanda utilizzando una sintassi più concisa e comprensibile pur essendo compatibile con più browser sembra al contrario. +1.
FreeAsInBeer,

2
@FreeAsInBeer Quindi non dovresti camminare da nessuna parte poiché la guida è molto più semplice. Ma sappiamo che è sciocco. Cammini se non hai bisogno di andare lontano. Si utilizza JavaScript semplice se è necessario fare qualcosa di semplice e non si desidera caricare un'intera libreria per farlo. Non c'è bisogno di sprecare gas / testimone per qualcosa di semplice.
Jacob Alvarez,

18
var elem = document.getElementById('mytest1');

// Simulate clicking on the specified element.
triggerEvent( elem, 'click' );

/**
 * Trigger the specified event on the specified element.
 * @param  {Object} elem  the target element.
 * @param  {String} event the type of the event (e.g. 'click').
 */
function triggerEvent( elem, event ) {
  var clickEvent = new Event( event ); // Create the event.
  elem.dispatchEvent( clickEvent );    // Dispatch the event.
}

Riferimento


Credo che questa dovrebbe essere la migliore risposta al giorno d'oggi
David Taubmann,

15

Potresti risparmiare un sacco di spazio usando jQuery. Hai solo bisogno di usare:

$('#myElement').trigger("click")

10
OP ha richiesto JavaScript. Sebbene sia compatto e funzionale, alcune persone preferiscono JS no-Library a cose come jQuery.
Carcassa,

43
Risparmia spazio scaricando jquery?
MH,

9
Alcune persone preferiscono anche il montaggio.
Dan Nissenbaum,

@MH Penso che un argomento più valido sarebbe "per mantenerlo semplice". Il tuo profilo predefinito qui in SO ha circa le stesse dimensioni di jQuery.
adelriosantiago,

7

La risposta migliore è la migliore! Tuttavia, non è stato il momento in cui mi sono scatenato eventi del mouse in Firefoxetype = 'click' .

Così, ho cambiato il document.createEventper 'MouseEvents'e che risolto il problema. Il codice aggiuntivo è verificare se un altro bit di codice interferisce o meno con l'evento, e se è stato annullato lo registrerei sulla console.

function eventFire(el, etype){
  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('MouseEvents');
    evObj.initEvent(etype, true, false);
    var canceled = !el.dispatchEvent(evObj);
    if (canceled) {
      // A handler called preventDefault.
      console.log("automatic click canceled");
    } else {
      // None of the handlers called preventDefault.
    } 
  }
}

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.