Ancora ad ancoraggio vuoto

Question

Ho un'ancora che non va da nessuna parte ma ha un onclick (ad esempio <a onclick="..."></a>). La mia domanda riguarda l'attributo href. Cosa dovrei mettere per il valore?

Se ometto semplicemente href, l'ancoraggio non ha la decorazione appropriata - l'icona del puntatore del mouse non cambia quando si posiziona il mouse su di esso.

Se utilizzo href="#", la finestra scorre in cima alla pagina quando si fa clic sul collegamento.

Se utilizzo href="javascript:..." e inserisco il valore onclick in corso javascript:, la pagina viene lasciata e la barra degli indirizzi contiene il codice JavaScript quando si fa clic sul collegamento.

Quando faccio riferimento al comportamento del browser, mi riferisco a Chrome, che sto testando per iniziare.

Cosa devo mettere per href quando l'ancora non è un collegamento reale ma esiste solo per avere il comportamento onclick?

Answer 1

Nel vostro gestore onclick, aggiungere questo alla fine:

return false; 

Questo sarà annullare l'elaborazione di default (cioè seguendo il link) e si può mettere quello che vuoi nel href (il # è buona come qualsiasi).

Answer 2

Idealmente si avrebbe un'opzione per coloro con JavaScript disabilitato:

<a href="degrade_option.html" onclick="return fancy_option();">do the option!</a> 

Se non siete in questo genere di cose, anche se si dovrebbe essere, il modo più comune è quello di utilizzare il pound ma poi cancellare l'evento per evitare che l'azione di default accada, in questo modo:

<a href="#" onclick="return do_something();">do something</a> 

ma poi si deve fare in modo do_something rendimenti false. (oppure puoi aggiungere return false; alla fine del gestore di clic, ma questo diventa ancora più sgradevole velocemente)

Anche se, per essere onesto, non dovresti davvero avere attributi Javascript inline per cominciare. Sono cattive pratiche, un incubo da mantenere, e ci sono alternative molto migliori là fuori.

EDIT: In risposta al tuo commento, l'alternativa è unobtrusive javascript:

"JavaScript discreto" è una tecnica emergente nel linguaggio di programmazione JavaScript, come utilizzato nel World Wide Web. Anche se il termine non è formalmente definito, i suoi principi di base sono generalmente inteso per includere:

• separazione delle funzionalità ("strato comportamento") dalla struttura/contenuto e la presentazione di una pagina Web
• Le migliori pratiche per evitare il problemi della tradizionale programmazione JavaScript (come incongruenze del browser e la mancanza di scalabilità)
• miglioramento progressivo per sostenere gli user agent che potrebbero non supportare funzionalità avanzate JavaScript

Leggi la pagina per alcuni esempi.

Answer 3

<a href="javascript:void(0);" onclick="...">txt</a> 

Answer 4

Preferisco rilasciare l'href (non è richiesto secondo le specifiche W3C) se non viene utilizzato. Per ottenere il cursore del mouse previsto, usa il CSS!

<style type="text/css"> 
a { cursor: pointer; } 
</style> 
<a onclick="go();">link</a> 

Answer 5

<a href="javascript:;">Foo</a> 

breve, descrittivo e non saltare come #.

Answer 6

Ci sono due modi per farlo, se il tag id del collegamento è link, è possibile utilizzare href="#" nel tuo codice HTML, e poi nel tuo JavaScript hanno:

$('#link').click(function(evt) { 
// code goes here 
evt.preventDefault(); 
}); 

questo modo si evita il comportamento normale del browser . O

$('#link').click(function(evt) { 
// code goes here 
return false; 
});