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

Di seguito sono due metodi per creare un collegamento che ha il solo scopo di eseguire il codice JavaScript. Qual è il migliore, 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>

Io uso javascript:void(0).

Tre ragioni. Incoraggiare l'uso di #un team di sviluppatori porta inevitabilmente ad usare il valore di ritorno della funzione chiamata così:

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

Ma poi dimenticano di usare return doSomething()l'onclick e semplicemente usano doSomething().

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

Un terzo motivo è che ci sono casi in cui la onclickproprietà dell'evento è assegnata in modo dinamico. Preferisco essere in grado di chiamare una funzione o assegnarla in modo dinamico senza dover codificare la funzione specificamente per un metodo di allegato 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)"

L'uso javascript:void(0)evita tutti i suddetti mal di testa e non ho trovato alcun esempio di un aspetto negativo.

Quindi, se sei uno sviluppatore solitario, puoi chiaramente fare la tua scelta, ma se lavori in gruppo devi dichiarare:

Utilizzare href="#", assicurarsi che onclickcontenga sempre return false;alla fine, che qualsiasi funzione chiamata non generi un errore e se si collega una funzione dinamicamente alla onclickproprietà, assicurarsi che oltre a non generare un errore ritorni false.

O

Uso href="javascript:void(0)"

Il secondo è chiaramente molto più facile da comunicare.

Nessuno dei due.

Se puoi avere un URL reale che ha senso usalo come HREF. Il clic non si attiva se qualcuno fa clic con il pulsante centrale sul tuo link per aprire una nuova scheda o se JavaScript è disabilitato.

Se ciò non è possibile, allora almeno iniettare il tag anchor nel documento con JavaScript e i gestori di eventi click appropriati.

Mi rendo conto che ciò non è sempre possibile, ma a mio avviso dovrebbe essere cercato di sviluppare qualsiasi sito Web pubblico.

Dai un'occhiata a JavaScript discreto e al miglioramento progressivo (entrambi Wikipedia).

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

1. Promuove la pratica del JavaScript invadente - che si è rivelato difficile da mantenere e difficile da ridimensionare. Maggiori informazioni su questo in JavaScript discreto .

2. Stai spendendo il tuo tempo a scrivere un codice incredibilmente dettagliato, che ha pochissimi (se del caso) vantaggi per la tua base di codice.

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

Il modo discreto di JavaScript

Basta non avere affatto un hrefattributo! Qualsiasi buon ripristino CSS si occuperebbe dello stile di cursore predefinito mancante, quindi non è un problema. Quindi collega la tua funzionalità JavaScript usando le migliori pratiche graziose e discrete - che sono più mantenibili poiché la tua logica JavaScript rimane in JavaScript, anziché nel tuo markup - che è essenziale quando inizi a sviluppare applicazioni JavaScript su larga scala che richiedono che la tua logica sia suddivisa in componenti e modelli in blackbox. Maggiori informazioni su questa architettura di applicazioni 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 esempio Backbone.js nella casella nera

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

Appunti

• Se si omette l' hrefattributo asull'elemento, l'elemento non sarà accessibile mediante la tabnavigazione con i tasti. Se si desidera che tali elementi siano accessibili tramite la tabchiave, è possibile impostare l' tabindexattributo o utilizzare buttoninvece gli elementi. Puoi facilmente modellare gli elementi dei pulsanti in modo che assomiglino ai normali collegamenti, come indicato nella risposta di Tracker1 .

• L'omissione hrefdell'attributo asull'elemento farà sì che Internet Explorer 6 e Internet Explorer 7 non assumano lo a:hoverstile, motivo per cui abbiamo invece aggiunto un semplice shim JavaScript per farlo tramite a.hover. Il che è perfettamente ok, come se non avessi un attributo href e nessun degrado grazioso, il tuo link non funzionerà comunque - e avrai problemi più grandi di cui preoccuparti.

• Se vuoi che la tua azione continui a funzionare con JavaScript disabilitato, usa un aelemento con un hrefattributo che va a qualche URL che eseguirà l'azione manualmente invece che tramite una richiesta Ajax o qualunque cosa dovrebbe essere la strada da percorrere. Se lo stai facendo, vuoi assicurarti di fare una event.preventDefault()chiamata al clic per assicurarti che quando si fa clic sul pulsante non segua il collegamento. Questa opzione è chiamata degradazione aggraziata.

'#'riporterà l'utente all'inizio della pagina, quindi di solito vado con void(0).

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

Vorrei suggerire onestamente nessuno dei due. Userei 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 l'associazione tramite script, non usando l' onclickattributo sul tag element. L'unico gotcha è l'effetto di testo 3D psuedo nei vecchi IE che non può essere disabilitato.

Se DEVI usare un elemento A, usa javascript:void(0);per i motivi già menzionati.

• Intercetterà sempre nel caso in cui l'evento onclick fallisca.
• Non si verificheranno chiamate di caricamento errate o l'attivazione di altri eventi in base a una modifica dell'hash
• Il tag hash può causare comportamenti imprevisti se il clic cade (clic sul clic), evitarlo a meno che non sia un comportamento fall-through appropriato e si desidera modificare la cronologia di navigazione.

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

Il primo, idealmente con un vero link da seguire nel caso in cui l'utente abbia JavaScript disabilitato. Assicurati solo di restituire false per evitare che l'evento click venga attivato se 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>.

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

Né se me lo chiedi;

Se il tuo "link" ha il solo scopo di eseguire un codice JavaScript, non si qualifica come un link; piuttosto un pezzo di testo con una funzione JavaScript accoppiata ad esso. Consiglierei di usare un <span>tag con un onclick handlerallegato ad esso e alcuni CSS di base per imitare un collegamento. Vengono creati collegamenti per la navigazione e, se il codice JavaScript non è destinato alla navigazione, non dovrebbe essere un <a>tag.

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>

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 aggiungeresti 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 hanno gestori di eventi inutili che coprono il tuo codice e potenzialmente offuscano (o almeno distraggono) il tuo contenuto reale.

L'uso #rende solo alcuni movimenti divertenti, quindi consiglierei di usare #selfse si desidera risparmiare sugli sforzi di battitura di JavaScript bla, bla,.

Io uso il seguente

<a href="javascript:;" onclick="myJsFunc();">Link</a>

anziché

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

Sono d'accordo con suggerimenti altrove che affermano che è necessario utilizzare un normale URL hrefnell'attributo, quindi chiamare alcune funzioni JavaScript in onclick. Il difetto è che si aggiungono automaticamente return falsedopo la chiamata.

Il problema con questo approccio è che se la funzione non funzionerà o se ci saranno problemi, il collegamento diventerà non cliccabile. L'evento onclick tornerà sempre false, quindi l'URL normale non verrà chiamato.

C'è una soluzione molto semplice. Lascia che la funzione ritorni truese funziona correttamente. Quindi utilizzare il valore restituito per determinare se il clic deve essere annullato o meno:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Si noti che annullo il risultato della doSomething()funzione. Se funziona, tornerà true, quindi verrà negato ( false) e path/to/some/URLnon verrà chiamato. Se la funzione tornerà false(ad esempio, il browser non supporta qualcosa utilizzato all'interno della funzione o qualsiasi altra cosa vada storta), viene negato truee path/to/some/URLviene chiamato.

#è migliore di javascript:anything, ma quanto segue è ancora meglio:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Dovresti sempre cercare un degrado aggraziato (nel caso in cui l'utente non abbia JavaScript abilitato ... e quando è con specifiche e budget). Inoltre, è considerato una forma errata utilizzare attributi e protocollo JavaScript direttamente in HTML.

Consiglio invece di utilizzare un <button>elemento, soprattutto se si suppone che il controllo produca una modifica nei dati. (Qualcosa come un POST.)

È ancora meglio se si iniettano gli elementi in modo discreto, un tipo di miglioramento progressivo. (Vedi questo commento .)

A meno che tu non stia scrivendo il link utilizzando JavaScript (in modo da sapere che è abilitato nel browser), dovresti idealmente fornire un link corretto per le persone che navigano con JavaScript disabilitato e quindi impedire l'azione predefinita del link nel tuo clic gestore di eventi. In questo modo quelli con JavaScript abilitato eseguiranno la funzione e quelli con JavaScript disabilitato passeranno a una pagina appropriata (o posizione all'interno della stessa pagina) anziché fare semplicemente clic sul collegamento e non succede nulla.

Sicuramente hash ( #) è meglio perché in JavaScript è uno pseudoscheme:

1. inquina la storia
2. crea un'istanza di nuova copia del motore
3. funziona in ambito globale e non rispetta il sistema di eventi.

Ovviamente "#" con un gestore onclick che impedisce l'azione predefinita è [molto] migliore. Inoltre, un collegamento che ha il solo scopo di eseguire JavaScript non è in realtà un "collegamento" a meno che non si invii l'utente a un ancoraggio ragionevole sulla pagina (solo # verrà inviato all'inizio) quando qualcosa va storto. Puoi semplicemente simulare l'aspetto del link con il foglio di stile e dimenticarti di href.

Inoltre, per quanto riguarda il suggerimento di cowgod, in particolare questo: ...href="javascript_required.html" onclick="...questo è un buon approccio, ma non distingue tra gli scenari "JavaScript disabilitato" e "onclick fail".

Di solito vado per

<a href="javascript:;" onclick="yourFunction()">Link description</a>

È più breve di javascript: void (0) e fa lo stesso.

Io userei:

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

Motivi:

1. Questo rende hrefsemplice, i motori di ricerca ne hanno bisogno. Se usi qualcos'altro (come una stringa), potrebbe causare un 404 not founderrore.
2. Quando il mouse passa sopra il collegamento, non mostra che si tratta di uno script.
3. Usando return false;, la pagina non salta all'inizio o non rompe il backpulsante.

Ho scelto l'uso javascript:void(0), perché l'utilizzo potrebbe impedire il clic con il pulsante destro del mouse per aprire il menu dei contenuti. Ma javascript:;è più corto e fa la stessa cosa.

Quindi, quando stai facendo alcune cose JavaScript con un <a />tag e se lo metti href="#"anche tu, puoi aggiungere return false alla fine dell'evento (in caso di associazione di eventi inline) come:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Oppure puoi modificare l' attributo href con JavaScript come:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

o

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

Ma semanticamente, tutti i modi di cui sopra per raggiungere questo obiettivo sono sbagliati (funziona bene però) . Se non viene creato alcun elemento per navigare nella pagina e associato ad alcune cose JavaScript, non dovrebbe essere un <a>tag.

Puoi semplicemente usare a <button />invece per fare cose o qualsiasi altro elemento come b, span o qualunque cosa vi si adatti secondo le tue necessità, perché ti è permesso aggiungere eventi su tutti gli elementi.

Quindi, c'è un vantaggio da usare <a href="#">. Per impostazione predefinita, ottieni il puntatore del cursore su quell'elemento a href="#". Per questo, penso che puoi usare CSS per questo tipo cursor:pointer;che risolve anche questo problema.

E alla fine, se stai vincolando l'evento dal codice JavaScript stesso, puoi farlo event.preventDefault()per raggiungere questo obiettivo se stai usando un <a>tag, ma se non stai usando un <a>tag per questo, lì ottieni un vantaggio, non Non è necessario farlo.

Quindi, se vedi, è meglio non usare un tag per questo tipo di cose.

Non utilizzare i collegamenti al solo scopo di eseguire JavaScript.

L'uso di href = "#" fa scorrere la pagina verso l'alto; l'uso di void (0) crea problemi di navigazione all'interno del browser.

Invece, usa un elemento diverso da un link:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

E lo stile con CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Sarebbe meglio usare jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

e omettere entrambi href="#"e href="javascript:void(0)".

Il markup del tag anchor sarà simile

<a onclick="hello()">Hello</a>

Abbastanza semplice!

Se si utilizza AngularJS , è possibile utilizzare quanto segue:

<a href="">Do some fancy JavaScript</a>

Che non farà nulla.

Inoltre

• Non ti porterà in cima alla pagina, come con (#)
  • Pertanto, non è necessario restituire esplicitamente falsecon JavaScript
• È breve e conciso

Se non c'è hrefforse non c'è motivo di usare un tag anchor.

È possibile allegare eventi (clic, passaggio del mouse, ecc.) Su quasi tutti gli elementi, quindi perché non utilizzare solo a spano a div?

E per gli utenti con JavaScript disabilitato: se non esiste un fallback (ad esempio un'alternativa href), almeno non dovrebbero essere in grado di vedere e interagire con quell'elemento, qualunque esso sia un <a>o un <span>tag.

Di solito, è necessario disporre sempre di un collegamento di riserva per assicurarsi che i client con JavaScript disabilitato abbiano ancora alcune funzionalità. Questo concetto si chiama JavaScript discreto.

Esempio ... Supponiamo che tu abbia il seguente link di ricerca:

<a href="search.php" id="searchLink">Search</a>

Puoi sempre fare quanto segue:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

In questo modo, le persone con JavaScript disabilitato vengono indirizzate search.phpmentre i tuoi spettatori con JavaScript visualizzano le tue funzionalità avanzate.

Li uso personalmente in combinazione. Per esempio:

HTML

<a href="#">Link</a>

con un po 'di jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

o

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Ma lo sto usando solo per impedire che la pagina salti in cima quando l'utente fa clic su un'ancora vuota. Raramente utilizzo onClick e altri oneventi direttamente in HTML.

Il mio suggerimento sarebbe di usare l' <span>elemento con l' classattributo invece di un'ancora. Per esempio:

<span class="link">Link</span>

Quindi assegnare la funzione a .linkcon uno script racchiuso nel corpo e appena prima del </body>tag o in un documento JavaScript esterno.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Nota: per gli elementi creati dinamicamente, utilizzare:

$('.link').on('click', function() {
    // do something
});

E per gli elementi creati dinamicamente che vengono creati con elementi creati dinamicamente, utilizzare:

$(document).on('click','.link', function() {
    // do something
});

Quindi puoi modellare l'elemento span in modo che appaia come un'ancora con un piccolo CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Ecco un esempio di jsFiddle di cui sopra.

A seconda di ciò che vuoi realizzare, potresti dimenticare il clic e usare solo l'href:

<a href="javascript:myJsFunc()">Link Text</a>

Evita la necessità di restituire false. Non mi piace l' #opzione perché, come detto, porterà l'utente in cima alla pagina. Se hai altrove da inviare all'utente se non ha JavaScript abilitato (cosa rara dove lavoro, ma un'ottima idea), il metodo proposto da Steve funziona alla grande.

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

Infine, puoi usare javascript:void(0)se non vuoi che nessuno vada da nessuna parte e se non vuoi chiamare una funzione JavaScript. Funziona alla grande se hai un'immagine con cui vuoi che si verifichi un evento di passaggio del mouse, ma l'utente non può fare clic su nulla.

Quando ho diversi falsi link, preferisco dare loro una classe di "no-link".

Quindi in jQuery, aggiungo il seguente codice:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

E per l'HTML, il link è semplicemente

<a href="/" class="no-link">Faux-Link</a>

Non mi piace usare i tag hash a meno che non vengano usati per le ancore, e faccio quanto sopra solo quando ho più di due faux-link, altrimenti vado con javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

In genere, mi piace solo evitare di usare un collegamento e avvolgere qualcosa in un arco di tempo e usarlo come un modo per attivare un codice JavaScript, come un pop-up o un rivelatore di contenuti.

Credo che tu stia presentando una falsa dicotomia. Queste non sono le uniche due opzioni.

Sono d'accordo con Mr. D4V360 che ha suggerito che, anche se stai usando il tag anchor, non hai davvero un anchor qui. Tutto quello che hai è una sezione speciale di un documento che dovrebbe comportarsi in modo leggermente diverso. Un <span>tag è molto più appropriato.

Ho provato entrambi su google chrome con gli strumenti per sviluppatori e ci sono id="#"voluti 0,32 secondi. Mentre il javascript:void(0)metodo ha richiesto solo 0,18 secondi. Quindi in Google Chrome, javascript:void(0)funziona meglio e più velocemente.

In sostanza sto parafrasando questo articolo pratico usando il miglioramento progressivo . La risposta breve è che non usi mai javascript:void(0);o #se l'interfaccia utente non ha già dedotto che JavaScript è abilitato, nel qual caso dovresti usarejavascript:void(0); . Inoltre, non utilizzare span come link, poiché ciò è semanticamente falso all'inizio.

L'uso di percorsi URL SEO friendly nella tua applicazione, come / Home / Azione / Parametri è anche una buona pratica. Se si dispone di un collegamento a una pagina che funziona prima senza JavaScript, è possibile migliorare l'esperienza in seguito. Utilizzare un collegamento reale a una pagina di lavoro, quindi aggiungere un evento onlick per migliorare la presentazione.

Ecco un esempio Home / ChangePicture è un collegamento funzionante a un modulo in una pagina completo di interfaccia utente e pulsanti di invio HTML standard, ma sembra più bello inserito in una finestra di dialogo modale con i pulsanti jQueryUI. In entrambi i casi funziona, a seconda del browser, che soddisfa il primo sviluppo mobile.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>