Was bewirkt das Hinzufügen von 'return false' zu einem Listener für Klickereignisse?

Oft habe ich solche Links auf HTML-Seiten gesehen:

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Was bewirkt das return falseda drin?

Außerdem sehe ich das normalerweise nicht in Schaltflächen.

Ist das irgendwo angegeben? In einer Spezifikation in w3.org?

Der Rückgabewert eines Ereignishandlers bestimmt, ob das Standardverhalten des Browsers ebenfalls stattfinden soll oder nicht. Wenn Sie auf Links klicken, folgt dies dem Link. Der Unterschied macht sich jedoch am deutlichsten bei den Formularübermittlungshandlern bemerkbar, bei denen Sie eine Formularübermittlung abbrechen können, wenn der Benutzer einen Fehler bei der Eingabe der Informationen gemacht hat.

Ich glaube nicht, dass es dafür eine W3C-Spezifikation gibt. Alle alten JavaScript-Schnittstellen wie diese haben den Spitznamen "DOM 0" erhalten und sind größtenteils nicht spezifiziert. Möglicherweise haben Sie etwas Glück beim Lesen der alten Netscape 2-Dokumentation.

Der moderne Weg, um diesen Effekt zu erzielen, ist das Aufrufen event.preventDefault(). Dies wird in der DOM 2-Ereignisspezifikation angegeben .

Sie können den Unterschied anhand des folgenden Beispiels erkennen:

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

Wenn Sie auf "Okay" klicken, wird true zurückgegeben, und der Link wird befolgt. Wenn Sie auf "Abbrechen" klicken, wird false zurückgegeben und der Verknüpfung folgt nicht. Wenn Javascript deaktiviert ist, wird dem Link normal gefolgt.

Hier ist eine robustere Routine, um das Standardverhalten und das Sprudeln von Ereignissen in allen Browsern abzubrechen:

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
    else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}

Ein Beispiel, wie dies in einem Ereignishandler verwendet werden würde:

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 
{
    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);
}

WAS TUT "return false" WIRKLICH?

return false macht tatsächlich drei sehr unterschiedliche Dinge, wenn Sie es nennen:

1. event.preventDefault ();
2. event.stopPropagation ();
3. Stoppt die Rückrufausführung und kehrt beim Aufruf sofort zurück.

Weitere Informationen finden Sie unter jquery-events-stop-misusing-return-false .

Beispielsweise :

Wenn Sie auf diesen Link klicken, wird durch Rückgabe von false das Standardverhalten des Browsers abgebrochen .

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

Durch die erneute Abstimmung von false aus einem JavaScript-Ereignis wird normalerweise das "Standard" -Verhalten aufgehoben. Bei Links wird der Browser angewiesen, dem Link nicht zu folgen.

Ich glaube, es führt dazu, dass das Standardereignis nicht eintritt.

In Ihrem Beispiel versucht der Browser nicht, zu # zu wechseln.

Return false verhindert, dass der Hyperlink nach dem Ausführen von Javascript verfolgt wird. Dies ist nützlich für unauffälliges Javascript, das sich elegant verschlechtert. Sie könnten beispielsweise ein Miniaturbild haben, das Javascript verwendet, um ein Popup des Bildes in voller Größe zu öffnen. Wenn Javascript deaktiviert oder das Bild mit der mittleren Maustaste angeklickt wird (in einem neuen Tab geöffnet), wird das Ereignis onClick ignoriert und das Bild wird normalerweise nur als Bild in voller Größe geöffnet.

Wenn return false nicht angegeben würde, würde das Bild sowohl das Popup starten als auch das Bild normal öffnen. Einige Leute verwenden anstelle von return false Javascript als href-Attribut. Dies bedeutet jedoch, dass der Link nichts tut, wenn Javascript deaktiviert ist.

Die Verwendung von return false in einem Onclick-Ereignis verhindert, dass der Browser den Rest des Ausführungsstapels verarbeitet, einschließlich des Verfolgens des Links im href-Attribut.

Mit anderen Worten, das Hinzufügen von return false verhindert, dass die href funktioniert. In Ihrem Beispiel ist dies genau das, was Sie wollen.

In Schaltflächen ist dies nicht erforderlich, da nur ein Klick ausgeführt wird - es gibt keine href, die verarbeitet und aufgerufen werden kann.

Die Rückgabe false besagt, dass die Standardaktion nicht ausgeführt werden soll, die im Fall von a <a href>dem Link folgen soll. Wenn Sie beim Onclick false zurückgeben, wird die href ignoriert.

Browser-Hack: http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Die Rückgabe false verhindert die Navigation. Andernfalls würde der Speicherort zum Rückgabewert von someFunc

Die return falseverhindert , dass die Seite von navigiert wird und unerwünschte Scrollen eines Fensters nach oben oder unten.

onclick="return false"

Ich bin überrascht, dass niemand onmousedownstatt erwähnt hat onclick. Das

onclick='return false'

fängt das Standardverhalten des Browsers nicht ab, was zu einer (manchmal unerwünschten) Textauswahl für mousedownaber führt

onmousedown='return false'

tut.

Mit anderen Worten, wenn ich auf eine Schaltfläche klicke, wird deren Text manchmal versehentlich ausgewählt, wodurch sich das Aussehen der Schaltfläche ändert, was möglicherweise unerwünscht ist. Dies ist das Standardverhalten, das wir hier verhindern möchten. Das mousedownEreignis wurde jedoch bereits zuvor registriert. clickWenn Sie dieses Verhalten nur in Ihrem clickHandler verhindern, hat dies keine Auswirkungen auf die unerwünschte Auswahl, die sich aus dem mousedownEreignis ergibt . Der Text wird also weiterhin ausgewählt. Wenn Sie jedoch die Standardeinstellung für das mousedownEreignis verhindern, wird der Job ausgeführt.

Siehe auch event.preventDefault () vs. return false

Ich habe diesen Link auf meiner HTML-Seite:

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

Die Funktion setBodyHtml () ist definiert als:

function setBodyHtml (s)
{ document.body.innerHTML = s;
}

Wenn ich auf den Link klicke, verschwindet der Link und der im Browser angezeigte Text ändert sich in "neuer Inhalt".

Aber wenn ich das "Falsche" aus meinem Link entferne, bewirkt das Klicken auf den Link (scheinbar) nichts. Warum ist das so?

Dies liegt daran, dass das Standardverhalten beim Klicken auf den Link und beim Anzeigen der Zielseite nicht abgebrochen wird, wenn ich nicht false zurückgebe. ABER hier ist der href des Hyperlinks "", sodass er auf die gleiche aktuelle Seite zurückführt. Die Seite wird also effektiv nur aktualisiert und anscheinend passiert nichts.

Im Hintergrund wird die Funktion setBodyHtml () weiterhin ausgeführt. Es weist sein Argument body.innerHTML zu. Da die Seite jedoch sofort aktualisiert / neu geladen wird, bleibt der geänderte Textinhalt möglicherweise nicht länger als ein paar Millisekunden sichtbar, sodass ich ihn nicht sehen werde.

Dieses Beispiel zeigt, warum es manchmal NÜTZLICH ist, "return false" zu verwenden.

Ich möchte dem Link SOME href zuweisen, damit er als Link als unterstrichener Text angezeigt wird. Ich möchte jedoch nicht, dass durch Klicken auf den Link die Seite effektiv neu geladen wird. Ich möchte, dass das Standardverhalten von Navigation = aufgehoben wird und alle Nebenwirkungen, die durch den Aufruf meiner Funktion verursacht werden, wirksam werden. Deshalb muss ich "false zurückgeben".

Das obige Beispiel würden Sie während der Entwicklung schnell ausprobieren. Für die Produktion würden Sie eher einen Click-Handler in JavaScript zuweisen und stattdessen verhindernDefault () aufrufen. Aber für ein schnelles Ausprobieren reicht die obige "return false" aus.

Bei Verwendung von Formularen ， können wir 'return false' verwenden, um das Senden zu verhindern.

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>