HTML-Ankertag mit Javascript onclick-Ereignis

84

Bei der Verwendung von Google habe ich festgestellt, dass sie Onclick-Ereignisse in Ankertags verwenden.

Bei mehr Optionen im Google-Header-Teil sieht es wie ein normales Tag aus, aber wenn Sie darauf klicken, wird es nicht umgeleitet, sondern ein Menü geöffnet. Normalerweise bei der Verwendung

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

Es geht normalerweise zu 'more.php' ohne zu feuern show_more_menu(), aber ich habe ein Menü auf dieser Seite selbst angezeigt . Wie mache ich Google ?

javascript hyperlink onclick anchor Smartkid
quelle

Antworten:

116

Wenn Ihre Onclick-Funktion false zurückgibt, wird das Standardverhalten des Browsers abgebrochen. So wie:

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

<script type='text/javascript'>

function check()
{
    return false;
}

</script>

In jedem Fall ist es nicht wichtig, ob Google dies tut oder nicht. Es ist sauberer, Ihre Onclick-Funktionen in Javascript zu binden - auf diese Weise trennen Sie Ihren HTML-Code von anderem Code.

TJHeuvel
quelle
3
1. Um sicherer zu sein, verwenden Sie ein # in href = "#" und führen Sie die erforderlichen Schritte im Javascript aus. Es ist sicher, auf diesen Link mit # href zu klicken; Die Seite verlässt / lädt die URL neu.
Bimal Poudel
3
Befolgen Sie die obigen Hinweise mit Vorsicht, da in den HTML5-Regeln ausdrücklich festgelegt ist, dass href="#"zum Anfang der Seite navigiert werden soll. Sie können das hrefAttibute einfach ohne Inhalt hinzufügen und das Klickverhalten abrufen. Das Festlegen #als URL für echte Seiten ( anstelle von Apps mit 100% Höhe auf einer Seite) ist im Allgemeinen eine schlechte Idee.
Mike 'Pomax' Kamermans
51

Sie können sogar die folgende Option ausprobieren: 

<a href="javascript:show_more_menu();">More >>></a>
sun2
quelle
1
Warnung: Wenn die Funktion einen expliziten Wert zurückgibt ( z. B. return null;, aber nicht return;), hat dies in einigen Browsern, z. B. FireFox, unbeabsichtigte Konsequenzen. Auf der Seite wird der gesamte Inhalt durch den zurückgegebenen Wert im Zeichenfolgenformat (Beispiel :) ersetzt [object Object].
Rannmann
42

Soweit ich weiß, möchten Sie nicht weiterleiten, wenn Sie auf den Link klicken. Du kannst tun :

<a href='javascript:;' onclick='show_more_menu();'>More ></a>
Aditya Manohar
quelle
3
Dies ist hilfreich, wenn Sie nicht möchten, dass die href irgendwohin zeigt.
kbpontius
Es ist cool und es funktioniert, aber jquery gibt einen Fehler aus "Fehler: Syntaxfehler, nicht erkannter Ausdruck: Javascript:;"
TheOddCoder
1

Verwenden Sie den folgenden Code, um das Menü anzuzeigen, und gehen Sie stattdessen zu 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>
Erweitern Sie das Snippet

Kamil Kiełczewski
quelle