Funzione JavaScript in href vs. onclick

Voglio eseguire una semplice funzione JavaScript con un clic senza alcun reindirizzamento.

C’è qualche differenza o beneficio tra mettere la chiamata JavaScript nell’attributo href (come questo:

 .... 

) vs. inserendolo nell’attributo onclick ( onclick all’evento onclick )?

Mettere l’onclick all’interno di href offenderebbe coloro che credono fortemente nella separazione dei contenuti dal comportamento / azione. L’argomento è che il tuo contenuto HTML dovrebbe rimanere focalizzato esclusivamente sul contenuto, non sulla presentazione o sul comportamento.

Il percorso tipico in questi giorni consiste nell’utilizzare una libreria javascript (ad es. Jquery) e creare un gestore di eventi usando quella libreria. Assomiglierebbe a qualcosa:

 $('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } ); 

cattivo:

 link text 

bene:

 link text 

meglio:

 link text 

ancora meglio 1:

 link text 

ancora meglio 2:

 link text 

Perché meglio? perché return false impedirà al browser di seguire il link

migliore:

Utilizza jQuery o altri framework simili per colbind il gestore onclick in base all’ID dell’elemento.

 $('#myLink').click(function(){ MyFunction(); return false; }); 

In termini di javascript , una differenza è che la parola chiave this nel gestore onclick farà riferimento all’elemento DOM il cui attributo onclick è (in questo caso l’elemento ), mentre this nell’attributo href farà riferimento all’object window .

In termini di presentazione , se un attributo href è assente da un collegamento (es. ) allora, per impostazione predefinita, i browser visualizzeranno il cursore del text (e non il cursore pointer spesso desiderato) poiché tratta il come un’ancora e non un collegamento.

In termini di comportamento , quando si specifica un’azione mediante la navigazione tramite href , il browser in genere supporta l’apertura di tale href in una finestra separata utilizzando un collegamento o un menu di scelta rapida. Questo non è ansible quando si specifica un’azione solo tramite onclick .


Tuttavia, se ti stai chiedendo quale sia il modo migliore per ottenere un’azione dynamic dal clic di un object DOM, albind un evento utilizzando javascript separato dal contenuto del documento è il modo migliore per procedere. Potresti farlo in molti modi. Un modo comune è utilizzare una libreria javascript come jQuery per associare un evento:

  link text  

Io uso

 Click HERE 

Un lungo cammino, ma ha fatto il lavoro. usa uno stile A per semplificare poi diventa:

  HERE 

Oltre a tutto qui, l’href viene visualizzato sulla barra di stato del browser e onclick no. Penso che non sia facile da usare mostrare il codice javascript lì.

il modo migliore per farlo è con:

  

Il problema è che questo aggiungerà un hash (#) alla fine dell’URL della pagina nel browser, richiedendo quindi all’utente di fare clic due volte sul pulsante Indietro per andare alla pagina precedente alla tua. Considerato ciò, è necessario aggiungere del codice per interrompere la propagazione dell’evento. La maggior parte degli strumenti javascript avrà già una funzione per questo. Ad esempio, utilizza il dojo toolkit

 dojo.stopEvent(event); 

fare così.

ha funzionato per me usando questa linea di codice:

 text 

Avere javascript: in qualsiasi attributo che non sia specifico per lo scripting è un metodo obsoleto di HTML. Mentre tecnicamente funziona, stai ancora assegnando le proprietà javascript a un attributo non di script, che non è una buona pratica. Può anche fallire sui vecchi browser, o anche su quelli moderni (un post su Google googled sembra indicare che a Opera non piacciono gli URL ‘javascript:’).

Una migliore pratica sarebbe il secondo modo, per inserire il javascript nell’attributo onclick , che viene ignorato se non è disponibile alcuna funzionalità di scripting. Inserisci un URL valido nel campo href (comunemente ‘#’) per fallback per coloro che non hanno javascript.

Personalmente, trovo fastidiose le chiamate javascript nel tag HREF. Di solito non presta molta attenzione al fatto che qualcosa non sia un collegamento javascript o meno, e spesso le volte vogliono aprire le cose in una nuova finestra. Quando provo a farlo con uno di questi tipi di link, ottengo una pagina vuota con niente e javascript nella mia barra degli indirizzi. Tuttavia, questo viene aggirato un po ‘usando un onlick.

Un’altra cosa che ho notato usando “href” con javascript:

Lo script nell’attributo “href” non verrà eseguito se la differenza di tempo tra 2 clic è piuttosto breve.

Ad esempio, prova ad eseguire l’esempio seguente e fare doppio clic (veloce!) Su ciascun collegamento. Il primo collegamento verrà eseguito solo una volta. Il secondo link verrà eseguito due volte.

  href onclick 

Riprodotto in Chrome (doppio clic) e IE11 (con triplo clic). In Chrome, se fai clic abbastanza velocemente puoi fare 10 clic e avere solo 1 esecuzione della funzione.

Firefox funziona bene.

La risposta migliore è una pessima pratica, non si dovrebbe mai collegarsi a un hash vuoto in quanto può creare problemi lungo la strada.

La cosa migliore è associare un gestore di eventi all’elemento, come hanno affermato numerose altre persone, tuttavia, do stuff funziona perfettamente in tutti i browser moderni, e io lo uso estensivamente durante il rendering dei modelli per evitare di dover eseguire nuovamente il rebind per ciascuna istanza. In alcuni casi, questo approccio offre prestazioni migliori. YMMV

Un altro interessante tid-bit ….

onclick e href hanno comportamenti diversi quando chiamano direttamente javascript.

onclick passerà correttamente this contesto, mentre href no, o in altre parole no context non funzionerà, mentre no context farà.

Sì, ho omesso l’ href . Anche se questo non segue le specifiche, funzionerà su tutti i browser, sebbene, idealmente, dovrebbe includere un href="javascript:void(0);" per buona misura

Questo funziona

 Click Here