Der Unterschied zwischen 'return false;' und 'e.preventDefault();'

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Haben Sie jemals diese beiden Dinge (im Titel) in jQuery gesehen? Hier ist ein einfaches Beispiel

$("a").click(function() {
   $("body").append($(this).attr("href"));
   return false;
}

Dieser Code würde dashrefAttribut jedes Mal als Text an den Body anhängen, wenn ein Link angeklickt wurde, aber **nicht** tatsächlich zu diesem Link gehen. Dasreturn false;Teil dieses Codes verhindert, dass der Browser die Standardaktion für diesen Link ausführt. Genau das könnte man so schreiben

$("a").click(function(e) {
   $("body").append($(this).attr("href"));
   e.preventDefault();
}

Was ist also der Unterschied?

Der Unterschied ist, dassreturn false;noch einen Schritt weiter geht, indem es auch verhindert, dass sich das Ereignis im DOM ausbreitet (oder „nach oben blubbert“). Die von-dir-vielleicht-nicht-gewusst-Information ist, dass jedes Mal, wenn ein Ereignis auf einem Element auftritt, dieses Ereignis auch auf jedem einzelnen Elternelement ausgelöst wird. Nehmen wir also an, Sie haben eine Box in einer Box. Beide Boxen haben darauf Klick-Ereignisse. Klicken Sie auf die innere Box, wird auch ein Klick auf die äußere Box ausgelöst, es sei denn, Sie verhindern die Ausbreitung. So

Mit anderen Worten

function() {
  return false;
}

// IS EQUAL TO

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

Es ist wahrscheinlich alles komplizierter als das, und Artikel wie dieser erklären es wahrscheinlich viel besser.