Tag di ancoraggio HTML con evento onclick Javascript

86

Utilizzando Google ho scoperto che stanno utilizzando eventi onclick nei tag di ancoraggio.

In altre opzioni nella parte dell'intestazione di Google, sembra un normale tag, ma facendo clic non viene reindirizzato ma si apre un menu. Normalmente quando si utilizza

<a href='more.php' onclick='show_more_menu()'>More >>></a>

Di solito va a 'more.php' senza sparare show_more_menu(), ma ho mostrato un menu in quella pagina stessa. Come ti piace Google ?

— smartkid
fonte

120

Se la funzione onclick restituisce false, il comportamento del browser predefinito viene annullato. Come tale:

<a href='http://www.google.com' onclick='return check()'>check</a>

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

Ad ogni modo, che Google lo faccia o meno non ha molta importanza. È più pulito associare le tue funzioni onclick all'interno di javascript: in questo modo separerai il tuo HTML da altro codice.

— TJHeuvel
fonte

3

1. Per essere più sicuri, usa un # in href = "#" e fai le cose necessarie all'interno del javascript. È sicuro fare clic su quel collegamento con # href; la pagina lascia / ricarica l'URL.

— Bimal Poudel

5

Segui il consiglio di cui sopra con cautela, poiché le regole HTML5 affermano esplicitamente che href="#"dovrebbe andare all'inizio della pagina. Puoi semplicemente aggiungere l' hrefattributo senza contenuto e ottenere il comportamento del clic. Assegnare #come URL per pagine reali (piuttosto che app con altezza 100% a pagina singola) è generalmente una cattiva idea.

— Mike 'Pomax' Kamermans

Solo una nota, nello stesso modo in cui si associa una classe CSS a un elemento e quindi si specificano gli stili dettagliati in un file CSS separato, è perfettamente utile associare una funzione di gestore di eventi inline a un elemento e quindi specificare l'implementazione dettagliata di quella funzione in un file JS separato. Il tuo file HTML è dove dichiari la struttura, l'aspetto e il comportamento della tua pagina web. Le implementazioni dettagliate risiedono altrove. Questo è il tipo di separazione che vuoi davvero.

— Sarsaparilla

54

Puoi anche provare sotto l'opzione:

<a href="javascript:show_more_menu();">More >>></a>

— sun2
fonte

1

Attenzione: se la funzione restituisce un valore esplicito (es:, return null;ma non return;), ciò avrà conseguenze non intenzionali in alcuni browser, come FireFox. La pagina avrà tutto il contenuto sostituito con il valore restituito in formato stringa (es:) [object Object].

— rannmann

45

Da quanto ho capito non si desidera reindirizzare quando si fa clic sul collegamento. Tu puoi fare :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>

— Aditya Manohar
fonte

3

Questo è utile quando non vuoi che href punti da nessuna parte.

— kbpontius

È interessante e funziona, ma jquery genera un errore "Errore: errore di sintassi, espressione non riconosciuta: javascript :;"

— TheOddCoder

Sto usando jQuery versione 1.10.2 e non ricevo l'errore di sintassi riscontrato da @TheOddCoder.

— Mike Finch

1

Usa il codice seguente per mostrare il menu invece vai a href addres

function show_more_menu(e) {
  if( !confirm(`Go to ${e.target.href} ?`) ) e.preventDefault();
}

<a href='more.php' onclick="show_more_menu(event)"> More >>> </a>

Espandi lo snippet

— Kamil Kiełczewski
fonte