Meglio utilizzare # o javascript:void(0); per l’attributo href quando si vuole lanciare una funzione JavaScript sul click di un link HTML?
Ammettendo di voler lanciare una funzione JavaScript quando clicco su un link HTML, posso avvalorare l’attributo href in due modi diversi, riportati nelle due righe del seguente codice.
Ma quale dei due metodi è più corretto e perché?
<a href="#" onclick="myJsFunc();">Run JavaScript Code</a> <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>
Un problema di concetto
La domanda sembra poggiarsi su un problema concettuale: l’uso dell’elemento HTML <a>
Leggiamo come viene definito tale elemento sul W3C:
The <a> tag defines a hyperlink, which is used to link from one page to another.
Il concetto dovrebbe essere chiaro: l’elemento <a> deve essere utilizzato per creare un link da una pagina web verso un’altra pagina web (html). Tuttavia tu non vuoi utilizzarlo a tale scopo; tu vuoi che al click del mouse sul link parta una funzione JavaScript denominata myJsFunc().
Alcune considerazioni
Ammettendo che si debba per forza utilizzare l’elemento <a>, allora tra il cancelletto e il javascript:void(0) è da preferire quest’ultimo per almeno 3 ragioni.
La prima ragione è che luso di # porta inevitabilmente ad usare il valore di ritorno della funzione chiamata, in questo modo:
function doSomething() {
//Some code
return false;
}
Ma le probabilità di dimenticarsi il return false; alla fine del codice sono elevatissime!
Una seconda ragione per evitare # è che return false; non verrà eseguito se la funzione chiamata genera un errore. Quindi devi ricordarti di gestire ogni errore in modo appropriato nella funzione chiamata.
Una terza ragione è che ci sono casi in cui il valore dell’attributo onclick viene assegnato dinamicamente.
Utilizzando javascript:void(0); ti eviti tutti i mal di testa di cui sopra.
Una possibile soluzione
Poiché l’elemento <a> non dovrebbe essere utilizzato per lanciare una funzione JavaScript, allora si potrebbe pensare di utilizzare un altro elemento inline come, ad esempio, l’elemento <span>. Se si vuole far somigliare il testo all’interno di <span> a quello all’interno di un link, basta utilizzare poche righe di codice CSS per modificarne l’aspetto e renderlo del tutto simile ad un elemento <a>.
Qui in basso puoi trovare sia il codice JavaScript sia quello HTML sia quello CSS (basta cliccare sui rispettivi link) e puoi anche vederlo in azione.