#08: preventDefault, stopPropagation und return false

Es kam im letzten Video kurz zur Sprache: Wie verhindert man, dass der Browser nach unten springt, wenn man auf einen Hash-Link klickt? Das ist das Standardverhalten des Browsers, und glücklicherweise können wir dem Browser mit JavaScript mitteilen, dass er das nicht tun soll.

Der einfachste Weg, damit umzugehen, ist dieser:

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

});

Sie werden sehen, dass diese Links nicht nach unten springen, wie Sie es vielleicht erwarten würden.

Siehe den Pen a5aeaa4890837ac172605983324d5470 von Chris Coyier (@chriscoyier) auf CodePen

Seien Sie dabei natürlich vorsichtig. Das verhindert zwar, dass ein Hash-Link auf der Seite nach unten springt, aber es verhindert auch, dass ein normaler Link zu einer neuen URL weitergeleitet wird. Verwenden Sie es also nur für Ankerlinks, bei denen Sie sicher sind, dass Sie sie ausschließlich mit Ihrem eigenen JavaScript behandeln möchten. Sie könnten die Auswahl einschränken, z. B. mit $("a[href^='#']"). z. B. "Das href-Attribut des Links beginnt mit einem Hash."

Aber oft werden Sie auch das hier sehen:

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

});

Und das erreicht dasselbe. Was hier passiert ist, dass return false; tatsächlich zwei Dinge tut. Es führt event.preventDefault(); aus und es tut noch etwas anderes: event.stopPropagation();

Sie können return false; verwenden, wenn Sie möchten, Sie müssen nur verstehen, was stopPropagation ist und damit einverstanden sein, dass es das tut. Ich finde normalerweise, dass es am besten ist, stopPropagation nicht zu verwenden, es sei denn, Sie wissen, dass Sie das speziell tun möchten. Es stoppt das "Bubbling" des DOM-Events. Zum Beispiel, wenn Ihr DOM so aussieht:

<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Dann klicken Sie direkt auf das Wort "Home", das Click-Event wird auf dem Ankerlink ausgelöst, dann blubbert es zum Listenelement, dann zum ungeordneten Listenelement, dann zum Nav-Element, alles bis zum Dokument selbst.

Wenn Sie stopPropagation ausführen, stoppt das Blubbern auf dem Element, auf dessen Event Sie es ausführen. Seien Sie sich dessen nur bewusst!

Ich habe mehr über diesen Unterschied hier geschrieben.

Gegen Ende des Videos spreche ich darüber, das Scrollen eines Elements mit preventDefault zu verhindern. Ich lag total falsch, dass man das tun könnte. Es ist einfach so, dass dies ein Event ist, das man nicht auf diese Weise stoppen kann. Es gibt Wege, es zu verhindern, wie die Verwendung von CSS (overflow: hidden; – was seltsam sein könnte) – oder ziemlich ausgefallene.