Come posso richiamare a livello di codice un evento onclick () da un tag anchor mantenendo il riferimento “this” nella funzione onclick?

È ansible richiamare a livello di codice un evento onClick per un tag di ancoraggio, mantenendo il riferimento “this” all’ancora?

Quanto segue non funziona … (almeno non in Firefox: document.getElementById (‘linkid’). Click () non è una funzione)

 function doOnClick() { document.getElementById('linkid').click(); //Should alert('https://stackoverflow.com/testlocation'); }  Testlink 

Devi apply il gestore di eventi nel contesto di quell’elemento:

 var elem = document.getElementById("linkid"); if (typeof elem.onclick == "function") { elem.onclick.apply(elem); } 

Altrimenti this farebbe riferimento al contesto in cui viene eseguito il codice sopra.

C’è una soluzione molto semplice con jQuery, ho appena usato questo e funziona perfettamente bene:

  Testlink 

Testato su IE8-10, Chrome, Firefox.

Per triggersre un evento, in pratica si chiama semplicemente il gestore di eventi per quell’elemento. Leggero cambiamento dal codice.

 var a = document.getElementById("element"); var evnt = a["onclick"]; if (typeof(evnt) == "function") { evnt.call(a); } 
 $("#linkid").trigger("click"); 

Dai un’occhiata al metodo handleEvent
https://developer.mozilla.org/en-US/docs/Web/API/EventListener

Javascript “grezzo”:

 function MyObj() { this.abc = "ABC"; } MyObj.prototype.handleEvent = function(e) { console.log("caught event: "+e.type); console.log(this.abc); } var myObj = new MyObj(); document.querySelector("#myElement").addEventListener('click', myObj); 

Ora fai clic sul tuo elemento (con id “myElement”) e dovrebbe stampare quanto segue nella console:

evento rilevato: fare clic
ABC

Questo ti permette di avere un metodo object come gestore di eventi e di avere accesso a tutte le proprietà dell’object in quel metodo.

Non è ansible passare direttamente un metodo di un object a addEventListener (come quello: element.addEventListener('click',myObj.myMethod); ) e aspettarsi che myMethod agisca come se fossi normalmente chiamato sull’object. Sto indovinando che qualsiasi funzione passata a addEventListener è in qualche modo copiata invece di essere referenziata. Ad esempio, se si passa un riferimento alla funzione listener di eventi a addEventListener (nella forma di una variabile) quindi si annulla questo riferimento, il listener di eventi viene comunque eseguito quando vengono rilevati eventi.

Un’altra soluzione (meno elegante) per passare un metodo come listener di eventi e stilare this e avere ancora accesso alle proprietà dell’object all’interno del listener di eventi sarebbe qualcosa del genere:

 // see above for definition of MyObj var myObj = new MyObj(); document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj)); 

Se stai usando questo puramente per fare riferimento alla funzione nell’attributo onclick, questa sembra una pessima idea. Gli eventi in linea sono una ctriggers idea in generale.

Suggerirei quanto segue:

 function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } handler = function(){ showHref(el); } showHref = function(el) { alert(el.href); } var el = document.getElementById('linkid'); addEvent(el, 'click', handler); 

Se si desidera chiamare la stessa funzione da un altro codice javascript, simulare un clic per chiamare la funzione non è il modo migliore. Prendere in considerazione:

 function doOnClick() { showHref(document.getElementById('linkid')); } 

Certo, OP ha dichiarato in modo molto simile che questo non ha funzionato, ma lo ha fatto per me. Sulla base delle note nella mia fonte, sembra che sia stato implementato nel tempo o dopo il post di OP. Forse è più standard ora.

 document.getElementsByName('MyElementsName')[0].click(); 

Nel mio caso, il mio pulsante non aveva un ID. Se il tuo elemento ha un id, usa preferibilmente il seguente (non testato).

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

Inizialmente ho provato questo metodo e non ha funzionato. Dopo aver fatto su Google sono tornato e ho capito che il mio elemento era per nome e non aveva un ID. Controlla bene che stai chiamando l’attributo giusto.

Fonte: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

In generale, consiglierei di non chiamare manualmente i gestori di eventi “manualmente”.

  • Non è chiaro cosa viene eseguito a causa di più ascoltatori registrati
  • Pericolo di entrare in un ciclo di eventi ricorsivo e infinito (fare clic su A innesco Fare clic su B, innescando clic A, ecc.)
  • Aggiornamenti ridondanti al DOM
  • Difficile distinguere le modifiche effettive nella vista causate dall’utente dalle modifiche apportate come codice di inizializzazione (che dovrebbe essere eseguito una sola volta).

È meglio capire che cosa esattamente si vuole che accada, metterlo in una funzione e chiamarlo manualmente E registrarlo come listener di eventi.