Cosa significa "javascript: void (0)"?

<a href="javascript:void(0)" id="loginlink">login</a>

Ho visto così hreftante volte, ma non so cosa significhi esattamente.

L' voidoperatore valuta l'espressione data e quindi ritorna undefined.

L' voidoperatore viene spesso utilizzato semplicemente per ottenere il undefinedvalore di base, di solito usando " void(0)" (che equivale a " void 0"). In questi casi, è undefined possibile utilizzare invece la variabile globale (supponendo che non sia stata assegnata a un valore non predefinito).

Una spiegazione è fornita qui: voidoperatore .

Il motivo per cui vorresti farlo con il hrefdi un link è che normalmente un javascript:URL reindirizza il browser a una versione in testo normale del risultato della valutazione di quel JavaScript. Ma se il risultato è undefined, allora il browser rimane sulla stessa pagina. void(0)è solo uno script breve e semplice che valuta undefined.

Oltre alla risposta tecnica, javascript:voidsignifica che l'autore sta facendo qualcosa di sbagliato.

Non ci sono buoni motivi per usare uno javascript:pseudo-URL (*). In pratica causerà confusione o errori qualora qualcuno provasse cose come "collegamento ai segnalibri", "apri collegamento in una nuova scheda" e così via. Questo succede parecchio ora che le persone si sono abituate a fare clic con il pulsante centrale per la nuova scheda: sembra un collegamento, si desidera leggerlo in una nuova scheda, ma risulta non essere affatto un collegamento reale, e fornisce risultati indesiderati come una pagina vuota o un errore JS quando si fa clic con il pulsante centrale.

<a href="#">è un'alternativa comune che potrebbe essere probabilmente meno male. Tuttavia, è necessario ricordarsi di return falsedal onclickgestore dell'evento per impedire che il collegamento venga seguito e scorrendo verso l'alto nella parte superiore della pagina.

In alcuni casi potrebbe esserci un luogo utile effettivo a cui puntare il collegamento. Ad esempio, se si dispone di un controllo su cui è possibile fare clic per aprire uno nascosto in precedenza <div id="foo">, è logico utilizzare <a href="#foo">per collegarsi ad esso. Oppure, se esiste un modo non JavaScript di fare la stessa cosa (ad esempio, 'thispage.php? Show = foo' che imposta foo visibile all'inizio), puoi collegarti a quello.

Altrimenti, se un collegamento punta solo ad alcuni script, non è in realtà un collegamento e non dovrebbe essere contrassegnato come tale. L'approccio comune sarebbe quella di aggiungere la onclicka una <span>, <div>o una <a>senza hrefe lo stile in qualche modo di mettere in chiaro è possibile fare clic su di esso. Questo è ciò che StackOverflow [ha fatto al momento della scrittura; ora usa href="#"].

Lo svantaggio di ciò è che si perde il controllo della tastiera, poiché non è possibile eseguire la tabulazione su un intervallo / div / bare-a o attivarlo con spazio. Se questo sia effettivamente uno svantaggio dipende dal tipo di azione che l'elemento deve intraprendere. Puoi, con un certo sforzo, tentare di imitare l'interactabilità della tastiera aggiungendo un tabIndexelemento e ascoltando un tasto Spazio. Ma non riprodurrà mai al 100% il comportamento reale del browser, anche perché browser diversi possono rispondere alla tastiera in modo diverso (per non parlare dei browser non visivi).

Se vuoi davvero un elemento che non sia un link ma che possa essere attivato normalmente dal mouse o dalla tastiera, quello che vuoi è un <button type="button">(o <input type="button">è altrettanto buono, per semplici contenuti testuali). Puoi sempre usare i CSS per ripristinarlo in modo che assomigli più a un link che a un pulsante, se lo desideri. Ma dal momento che si comporta come un pulsante, è così che dovresti davvero contrassegnarlo.

(*: nella creazione del sito, comunque. Ovviamente sono utili per i bookmarklet. Gli javascript:pseudo-URL sono una stranezza concettuale: un localizzatore che non punta a una posizione, ma invece chiama codice attivo all'interno della posizione corrente. Hanno causato un'enorme sicurezza problemi sia per i browser che per le webapp, e non avrebbero mai dovuto essere inventati da Netscape.)

Significa che non farà nulla. È un tentativo di non far navigare il link ovunque. Ma non è nel modo giusto.

Si dovrebbe in realtà solo return falsenel onclickcaso in, in questo modo:

<a href="#" onclick="return false;">hello</a>

In genere viene utilizzato se il collegamento esegue alcune operazioni "JavaScript-y". Come pubblicare un modulo AJAX o scambiare un'immagine o altro. In tal caso, esegui qualunque funzione venga chiamata return false.

Per rendere il tuo sito Web assolutamente fantastico, tuttavia, generalmente includerai un link che fa la stessa azione, se la persona che naviga sceglie di non eseguire JavaScript.

<a href="backup_page_displaying_image.aspx"
   onclick="return coolImageDisplayFunction();">hello</a>

Esiste una GRANDE differenza nel comportamento di "#" vs javascript: void

"#" ti porta all'inizio della pagina mentre "javascript: void (0);" non.

Questo è molto importante se stai programmando pagine dinamiche. l'utente non vuole tornare all'inizio solo perché ha fatto clic su un collegamento nella pagina.

È un metodo molto popolare per aggiungere funzioni JavaScript ai collegamenti HTML.
Ad esempio: i [Print]collegamenti visualizzati su molte pagine Web sono scritti in questo modo:

<a href="javascript:void(0)" onclick="callPrintFunction()">Print</a>

Perché abbiamo bisogno hrefmentre onclickda soli possiamo fare il lavoro? Perché quando gli utenti passano il mouse sopra il testo 'Stampa' quando non c'è href, il cursore si trasforma in un cursore (ꕯ) anziché in un puntatore (👆). Avere solo hrefun atag lo convalida come collegamento ipertestuale.

Un'alternativa a href="javascript:void(0);", è l'uso di href="#". Questa alternativa non richiede l'attivazione di JavaScript nel browser dell'utente, quindi è più compatibile.

Si dovrebbe sempre avere un href sui vostri un tag. Chiamare una funzione JavaScript che restituisce "non definito" andrà bene. Quindi collegherà a '#'.

I tag di ancoraggio in Internet Explorer 6 senza href non a:hoverapplicano lo stile.

Sì, è terribile e un crimine minore contro l'umanità, ma anche Internet Explorer 6 in generale.

Spero che questo possa essere d'aiuto.

Internet Explorer 6 è in realtà un grave crimine contro l'umanità.

Vale la pena ricordare che a volte vedrai 0 vuoto quando controlli per non definito, semplicemente perché richiede meno caratteri.

Per esempio:

something === undefined

vs.

something === void 0

Alcuni metodi di minificazione sostituiscono undefined con void 0 per questo motivo.

L'uso di javascript:void(0)significa che l'autore dell'HTML sta abusando dell'elemento anchor al posto dell'elemento button.

I tag anchor vengono spesso abusati dell'evento onclick per creare pseudo-pulsanti impostando href su "#" o "javascript: void (0)" per impedire l'aggiornamento della pagina. Questi valori causano comportamenti imprevisti durante la copia / trascinamento di collegamenti, l'apertura di collegamenti in una nuova scheda / finestra, il bookmarking e quando JavaScript è ancora in fase di download, errori o disabilitato. Ciò trasmette anche semantica errata alle tecnologie assistive (ad es. Screen reader). In questi casi, si consiglia di utilizzare un <button>invece. In generale, è necessario utilizzare un ancoraggio per la navigazione utilizzando un URL appropriato.

Fonte: Pagina MDN<a> .

voidè un operatore utilizzato per restituire un undefinedvalore in modo che il browser non sia in grado di caricare una nuova pagina.

I browser Web proveranno a prendere tutto ciò che viene utilizzato come URL e lo caricheranno a meno che non sia una funzione JavaScript che restituisce null. Ad esempio, se facciamo clic su un collegamento come questo:

<a href="javascript: alert('Hello World')">Click Me</a>

quindi verrà visualizzato un messaggio di avviso senza caricare una nuova pagina, poiché alertè una funzione che restituisce un valore null. Ciò significa che quando il browser tenta di caricare una nuova pagina, viene visualizzato null e non ha nulla da caricare.

Una cosa importante da notare sull'operatore vuoto è che richiede un valore e non può essere utilizzato da solo. Dovremmo usarlo in questo modo:

<a href="javascript: void(0)">I am a useless link</a>

Per comprendere questo concetto si dovrebbe prima capire l'operatore vuoto in JavaScript.

La sintassi per l'operatore vuoto è: void «expr»che valuta expr e restituisce non definito.

Se si implementa void come funzione, si presenta come segue:

function myVoid(expr) {
    return undefined;
}

Questo operatore vuoto ha un uso importante che è: scartare il risultato di un'espressione.

In alcune situazioni, è importante restituire indefinito rispetto al risultato di un'espressione. Quindi void può essere usato per scartare quel risultato. Una di queste situazioni riguarda javascript: URL, che dovrebbero essere evitati per i collegamenti, ma sono utili per i bookmarklet. Quando visiti uno di questi URL, molti browser sostituiscono il documento corrente con il risultato della valutazione del "contenuto" degli URL, ma solo se il risultato non è indefinito. Pertanto, se si desidera aprire una nuova finestra senza modificare il contenuto attualmente visualizzato, è possibile effettuare le seguenti operazioni:

javascript:void window.open("http://example.com/")

L' voidoperatore valuta l'espressione data e quindi restituisce non definito. Evita di aggiornare la pagina.

Gli sviluppatori Web utilizzano javascript:void(0)perché è il modo più semplice per impedire il comportamento predefinito del atag. void(*anything*)ritorna undefineded è un valore falso. e restituire un valore errato è come return falsein onclickcaso di atag che ne impediscono il comportamento predefinito.

Quindi penso che javascript:void(0)sia il modo più semplice per prevenire il comportamento predefinito del atag.

Un collegamento deve avere un target HREF da specificare per abilitarlo come oggetto di visualizzazione utilizzabile.

La maggior parte dei browser non analizzerà JavaScript avanzato in un

<A HREF="" 

tag come:

<A href="JavaScript:var elem = document.getElementById('foo');" 

perché il tag HREF nella maggior parte dei browser non consente gli spazi bianchi o convertirà gli spazi bianchi in% 20, l'equivalente HEX di uno SPAZIO, che rende JavaScript assolutamente inutile per l'interprete.

Quindi, se si desidera utilizzare un tag A HREF per eseguire JavaScript incorporato, è necessario specificare un valore valido per HREF FIRST che non sia troppo complesso (non contiene spazi bianchi) e quindi fornire JavaScript in un tag dell'attributo evento come OnClick , OnMouseOver, OnMouseOut, ecc.

La risposta tipica è fare qualcosa del genere:

<A HREF="#" onclick="var elem = document.getElementById('foo');">Get the object</a>

Funziona bene, ma fa saltare la pagina all'inizio a causa del segno cancelletto / tag hash che gli dice di farlo.

Basta fornire un segno cancelletto / tag hash in un tag A HREF in realtà specifica l'ancoraggio radice, che è sempre, per impostazione predefinita, la parte superiore della pagina, è possibile specificare una posizione diversa utilizzando specificando l'attributo NAME all'interno di un tag A HREF.

<A NAME='middleofpage'></A>

È quindi possibile modificare il tag A HREF per passare a "middleofpage" ed eseguire il JavaScript nell'evento OnClick, una volta che ciò accada in questo modo:

<A HREF="#middleofpage" onclick="var elem = document.getElementById('foo');">Get the object</a>

Ci saranno MOLTE volte in cui non vuoi che quel link salti in giro, quindi puoi fare due cose:

<A HREF="#thislinkname" name='thislinkname' onclick="var elem = document.getElementById('foo');">Get the object</a>

Ora non andrà da nessuna parte quando si fa clic, ma potrebbe far ricentrare la pagina dalla finestra corrente. Questo non è carino. Qual è il modo migliore per fornire javascript in linea, usando un A HREF, ma senza dover fare nulla di quanto sopra? Javascript: void (0);

<A HREF="JavaScript:void(0);" onclick="var elem = document.getElementById('foo');">Get the object</a>

Questo dice al browser di andare ORA QUI, ma invece esegue il JavaScript valido: void (0); funziona prima nel tag HREF perché non contiene spazi bianchi e non verrà analizzato come URL. Verrà invece eseguito dal compilatore. VOID è una parola chiave che, se fornita con un perametro di 0, restituisce UNDEFINED, che non utilizza più risorse per gestire un valore di ritorno che si verificherebbe senza specificare lo 0 (è più gestione della memoria / prestazioni ottimali).

La prossima cosa che succede è che OnClick viene eseguito. La pagina non si sposta, non succede nulla in termini di visualizzazione.

JavaScript: URL a parte; qui è dove void può essere utile per scrivere codice più breve.

var error1 = false,
    error2 = false,
    error3 = false;

function error1() {

  error1 = true;
}

function myFunction() {

  // You can easily return and call a function at once, if you don't care about myFunction's return value
  if (!someCondition1)
    return error1();

  // What if you want to set a value first?
  if (!someCondition2) {
    error2 = true;
    return
  }

  // Shortest way to return and set a value at once
  if (!someCondition3)
    return void(error3 = true);

  // More code goes here
}