jQuery: Unterschied zwischen "return false" und "event.preventDefault()"

In JavaScript jQuery Code, scheinen manche ein "return false" und ein "event.preventDefault()" synonym zu benutzen. Was aber ist der genaue Unterschied zwischen diesen beiden Lines of Code?

Ein Beispiel

Wir wollen uns, um diese Frage zu ergründen, zunächst ein Beispiel mit "return false" ansehen:

$("a").click(function() {
    return false;
});

Und hier ein Beispiel mit event.preventDefault():

$("a").click(function(event) {
    event.preventDefault();
});

Beide Codes sorgen dafür, dass die eigentliche Aktion (Klick auf ein a-Element ruft den entsprechenden Link auf) unterdrückt wird. Was ist aber der Unterschied?

Der Unterschied

Der Unterschied zwischen diesen beiden Vorgehensweisen liegt darin, dass ein "return false" weiter reichende Konsequenzen hat, als ein preventDefault(). Ein Aufruf von preventDefault() sorgt lediglich dafür, dass die Standardaktion nicht weiter ausgeführt wird, ein return false in jQuery dagegen sorgt auch dafür, dass ein stopPropagation() durchgeführt wird. Das bedeutet, dass eine ausgeführte Aktion wie ein Klick auf ein Element nicht an die darunter liegenden Elemente weiter gegeben wird.

Daher ist ein:

function() {
    return false;
}

Dasselbe wie:

function(event) {
    event.preventDefault();
    event.stopPropagation();
}

Allerdings nur in jQuery! Innerhalb von JavaScript in normalen nicht-jQuery-Event-Handlern hat "return false" nicht diese Wirkung und auch nach einem "return false" wird die Aktion dort trotzdem weitergegeben.