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 ?

— Smartkid
quelle

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