Come posso simulare un clic per un tag di ancoraggio?

Voglio simulare un clic per un tag di ancoraggio con tutti gli extra come la gestione mira corretta.Come posso simulare un clic per un tag di ancoraggio?

Sembra che ci sia un "[click()] [3]" Metodo per oggetto DOM di ancoraggio, ma non tutti i browser supportano questo. Firefox getta questo errore:

Error: anchorObj.click is not a function

Funziona anche stranamente su Opera 10 e Konqueror, causando infiniti scatti per accadere quando viene chiamata all'interno gestore onclick di un div circostante. Immagino che solo IE8 funzioni bene con esso. In ogni caso non lo voglio perché i principali browser hanno per lo più problemi.

ho trovato questa soluzione alternativa per Firefox nei forum Mozilla:

var evt = document.createEvent("MouseEvents"); 
evt.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, false, 0, null); 
anchorObj.dispatchEvent(evt);

Questo sembra troppo brutto e ingombrante per me. Non so quanto sia compatibile e voglio evitare di scrivere il codice specifico del browser il più possibile.

non posso usare location.href = anchorObj.href; perché non gestisce l'attributo "target". Posso fare un po 'di hard coding in base al valore dell'obiettivo, ma vorrei anche evitarlo.

C'è suggerimento di passare a JQuery, ma io non sono sicuro di come bene gestisce proprietà target sia visto che non ho lavorato con prima.

fonte

2009-09-14 Sedat Kapanoglu

Possibile duplicato di [JavaScript: invocazione di un evento di clic di un tag di ancoraggio da javascript] (http://stackoverflow.com/questions/980709/javascript-invoking-click-event-of-an-anchor-tag-from -javascript) –

Ecco un banco di prova completo che simula l'evento click, chiama tutti i gestori collegati (tuttavia essi sono stati in allegato), mantiene l'attributo "target" ("srcElement" in IE), bolle come un evento normale sarebbe, ed emula recursion- di IE prevenzione. Testato in FF 2, Chrome 2.0, Opera 9.10 e, naturalmente, IE (6):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script> 
function fakeClick(event, anchorObj) { 
    if (anchorObj.click) { 
    anchorObj.click() 
    } else if(document.createEvent) { 
    if(event.target !== anchorObj) { 
     var evt = document.createEvent("MouseEvents"); 
     evt.initMouseEvent("click", true, true, window, 
      0, 0, 0, 0, 0, false, false, false, false, 0, null); 
     var allowDefault = anchorObj.dispatchEvent(evt); 
     // you can check allowDefault for false to see if 
     // any handler called evt.preventDefault(). 
     // Firefox will *not* redirect to anchorObj.href 
     // for you. However every other browser will. 
    } 
    } 
} 
</script> 
</head> 
<body> 

<div onclick="alert('Container clicked')"> 
    <a id="link" href="#" onclick="alert((event.target || event.srcElement).innerHTML)">Normal link</a> 
</div> 

<button type="button" onclick="fakeClick(event, document.getElementById('link'))"> 
    Fake Click on Normal Link 
</button> 

<br /><br /> 

<div onclick="alert('Container clicked')"> 
    <div onclick="fakeClick(event, this.getElementsByTagName('a')[0])"><a id="link2" href="#" onclick="alert('foo')">Embedded Link</a></div> 
</div> 

<button type="button" onclick="fakeClick(event, document.getElementById('link2'))">Fake Click on Embedded Link</button> 

</body> 
</html>

Demo here.

Evita ricorsione in browser diversi da IE ispezionando l'oggetto evento che viene avviato il simulato clic, controllando l'attributo target dell'evento (che remains unchanged during propagation).

Ovviamente IE lo fa internamente con un riferimento al suo global event object. Il livello DOM 2 non definisce tale variabile globale, quindi per questo motivo il simulatore deve passare nella sua copia locale di event.

fonte

2009-09-14 14:37:00

Un aggiornamento: a partire da ora initMouseEvent è deprecato vedere [https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent](https://developer.mozilla.org/ it-US/docs/Web/API/MouseEvent/initMouseEvent) utilizzano invece eventi personalizzati [https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events](https://developer. mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) – user2315552

bene, è possibile verificare rapidamente lo scatto invio tramite jQuery in questo modo

$('#link-id').click();

Se continui ad avere problemi con click rispettando il target, si può sempre fare questo

$('#link-id').click(function(event, anchor) 
{ 
    window.open(anchor.href, anchor.target, ''); 
    event.preventDefault(); 
    return false; 
});

fonte

2009-09-14 14:04:22

citato da https://developer.mozilla.org/en/DOM/element.click

The click method is intended to be used with INPUT elements of type button, checkbox, radio, reset or submit. Gecko does not implement the click method on other elements that might be expected to respond to mouse–clicks such as links (A elements), nor will it necessarily fire the click event of other elements.

Non–Gecko DOMs may behave differently.

Purtroppo sembra che tu hai alrea dy ha scoperto la migliore soluzione al tuo problema.

Come nota a margine, sono d'accordo sul fatto che la tua soluzione sembra non ideale, ma se incapsuli la funzionalità all'interno di un metodo (proprio come farebbe JQuery) non è così male.

fonte

2009-09-14 14:05:38

C'è un modo più semplice per raggiungerlo,

HTML

<a href="https://getbootstrap.com/" id="fooLinkID" target="_blank">Bootstrap is life !</a>

JavaScript

// Simulating click after 3 seconds 
setTimeout(function(){ 
    document.getElementById('fooLinkID').click(); 
}, 3 * 1000);

Utilizzo di javascript semplice per simulare un clic con affrontare la proprietà target .

È possibile controllare l'esempio di lavoro qui su jsFiddle.

fonte

2017-04-11 16:20:22

Come posso simulare un clic per un tag di ancoraggio?

risposta

Problemi correlati