Domanda Quale valore "href" dovrei usare per i link JavaScript, "#" o "javascript: void (0)"?


Di seguito sono riportati due metodi per creare un collegamento che ha l'unico scopo di eseguire il codice JavaScript. Quale è meglio, in termini di funzionalità, velocità di caricamento della pagina, scopi di convalida, ecc.?

function myJsFunc() {
    alert("myJsFunc");
}
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

o

function myJsFunc() {
    alert("myJsFunc");
}
 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>


3671


origine


risposte:


Io uso javascript:void(0).

Tre ragioni. Incoraggiare l'uso di # tra un team di sviluppatori porta inevitabilmente ad usare il valore di ritorno della funzione chiamata in questo modo:

function doSomething() {
    //Some code
    return false;
}

Ma poi si dimenticano di usare return doSomething() nel onclick e basta usare doSomething().

Un secondo motivo per evitare # è questo il finale return false; non verrà eseguito se la funzione chiamata genera un errore. Quindi gli sviluppatori devono anche ricordare di gestire ogni errore in modo appropriato nella funzione chiamata.

Una terza ragione è che ci sono casi in cui il onclick la proprietà evento è assegnata dinamicamente. Preferisco essere in grado di chiamare una funzione o assegnarla dinamicamente senza dover codificare la funzione specificamente per un metodo di collegamento o un altro. Quindi il mio onclick (o su qualsiasi cosa) nel markup HTML assomiglia a questo:

onclick="someFunc.call(this)"

O

onclick="someFunc.apply(this, arguments)"

utilizzando javascript:void(0) evita tutti i mal di testa di cui sopra, e non ho trovato alcun esempio di svantaggio.

Quindi, se sei uno sviluppatore solitario, puoi chiaramente fare la tua scelta, ma se lavori come una squadra devi dichiarare:

Uso href="#", assicurarsi onclick contiene sempre return false; alla fine, qualsiasi funzione chiamata non genera un errore e se si collega dinamicamente una funzione a onclick la proprietà si assicura che, oltre a non generare un errore, ritorni false.

O

Uso href="javascript:void(0)"

Il secondo è chiaramente molto più facile da comunicare.


2005



Nessuno dei due.

Se è possibile avere un URL effettivo che ha senso utilizzarlo come HREF. L'onclick non si attiva se qualcuno fa clic di mezzo sul tuo link per aprire una nuova scheda o se ha JavaScript disabilitato.

Se ciò non è possibile, allora dovresti almeno iniettare il tag di ancoraggio nel documento con JavaScript e il gestore di eventi di click appropriato.

Mi rendo conto che questo non è sempre possibile, ma a mio parere dovrebbe essere impegnato nello sviluppo di qualsiasi sito web pubblico.

Check-out JavaScript discreto e Miglioramento progressivo (entrambi Wikipedia).


1197



fare <a href="#" onclick="myJsFunc();">Link</a> o <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> o qualsiasi altra cosa che contenga un onclick attributo - era okay indietro di cinque anni fa, anche se ora può essere una cattiva pratica. Ecco perché:

  1. Promuove la pratica di JavaScript invadente, che si è rivelato difficile da mantenere e difficile da scalare. Maggiori informazioni su questo in JavaScript discreto.

  2. Passi il tuo tempo a scrivere un codice incredibilmente prolisso - che ha pochissimi (se non nessuno) benefici per il tuo codice base.

  3. Ora ci sono modi migliori, più facili e più manutenibili e scalabili per ottenere il risultato desiderato.

Il modo discreto di JavaScript

Basta non avere un href attributo a tutti! Qualsiasi buon reset del CSS si prenderà cura dello stile di default del cursore mancante, quindi questo è un non-problema. Quindi allega le tue funzionalità JavaScript usando le best practice graziose e discrete, che sono più manutenibili man mano che la tua logica JavaScript rimane in JavaScript, anziché nel markup, il che è essenziale quando inizi a sviluppare applicazioni JavaScript su larga scala che richiedono la suddivisione della tua logica in componenti e modelli blackboxed. Maggiori informazioni su questo in Architettura applicativa JavaScript su larga scala

Esempio di codice semplice

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});
a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Un blackbox Backbone.js esempio

Per un esempio di componente Backbone.js scalabile, blackboxed - vedi questo esempio di jsfiddle funzionante qui. Nota come utilizziamo le pratiche discrete di JavaScript, e in una piccola quantità di codice abbiamo un componente che può essere ripetuto sulla pagina più volte senza effetti collaterali o conflitti tra le diverse istanze del componente. Stupefacente!

Gli appunti

  • Omettendo il href attributo sul a l'elemento farà sì che l'elemento non sia accessibile usando tab navigazione chiave. Se desideri che quegli elementi siano accessibili tramite il tab chiave, è possibile impostare il tabindex attributo o uso button elementi invece. Puoi facilmente modificare gli elementi dei pulsanti in modo che assomiglino ai normali link menzionati in La risposta di Tracker1.

  • Omettendo il href attributo sul a l'elemento causerà Internet Explorer 6 e Internet Explorer 7 non assumere il a:hover styling, motivo per cui abbiamo aggiunto un semplice shim JavaScript per realizzare questo tramite a.hover anziché. Il che è perfettamente a posto, come se non avessi un attributo href e nessuna degradazione aggraziata, quindi il tuo link non funzionerebbe comunque - e avrai problemi più grandi di cui preoccuparti.

  • Se vuoi che la tua azione funzioni ancora con JavaScript disabilitato, quindi usa un a elemento con a href attributo che va a qualche URL che eseguirà l'azione manualmente anziché tramite una richiesta Ajax o qualsiasi altra dovrebbe essere la strada da percorrere. Se lo fai, allora vuoi assicurarti di farlo event.preventDefault() sulla tua chiamata click per assicurarti che quando il pulsante viene cliccato non segue il link. Questa opzione è chiamata degradazione graduale.


734



'#' riporterà l'utente in cima alla pagina, quindi di solito vado con void(0).

javascript:; si comporta anche come javascript:void(0);


281



Onestamente non consiglierei né Vorrei usare uno stilizzato <button></button> per quel comportamento.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}
<p>A button that looks like a <button type="button" class="link">link</button>.</p>

In questo modo puoi assegnare il tuo onclick. Suggerisco anche il binding tramite script, non usando il onclick attributo sul tag dell'elemento. L'unico risultato è l'effetto di testo psuedo 3d nei vecchi IE che non possono essere disabilitati.


Se tu DOVERE usa un elemento A, usa javascript:void(0); per ragioni già citate.

  • Intercetterà sempre nel caso in cui il tuo evento onclick fallisca.
  • Non si verificheranno chiamate di carico errate o si attivano altri eventi in base a una modifica hash
  • Il tag hash può causare comportamenti imprevisti se il clic cade attraverso (genera clic), evitalo a meno che non si tratti di un comportamento appropriato e desideri modificare la cronologia di navigazione.

NOTA: è possibile sostituire il 0 con una stringa come javascript:void('Delete record 123') che può fungere da indicatore aggiuntivo che mostrerà ciò che effettivamente farà il clic.


209



Il primo, idealmente con un link reale da seguire nel caso in cui l'utente abbia disabilitato JavaScript. Assicurati di restituire false per evitare che l'evento click venga attivato se il JavaScript viene eseguito.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Se usi Angular2, funziona in questo modo:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Vedere qui https://stackoverflow.com/a/45465728/2803344


128



Idealmente lo faresti:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

O, ancora meglio, avresti il ​​link di azione predefinito nell'HTML e dovresti aggiungere l'evento onclick all'elemento in modo discreto tramite JavaScript dopo il rendering del DOM, assicurando così che se JavaScript non è presente / utilizzato non lo fai avere gestori di eventi inutili che introducono il tuo codice e potenzialmente offuscano (o almeno distolgono) il tuo contenuto reale.


90



Neanche se me lo chiedi;

Se il tuo "link" ha l'unico scopo di eseguire qualche codice JavaScript, non si qualifica come link; piuttosto una porzione di testo con una funzione JavaScript accoppiata ad essa. Consiglierei di usare a <span> tag con un onclick handler allegato ad esso e alcuni CSS di base per immortalare un link. I collegamenti sono fatti per la navigazione, e se il tuo codice JavaScript non è per la navigazione non dovrebbe essere un <a> etichetta.

Esempio:

function callFunction() { console.log("function called"); }
.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}
<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>


86