Im letzten Video wurde sehr kurz darauf hingewiesen: Wie können Sie verhindern, dass der Browser nach unten springt, wenn Sie auf einen Hash-Link klicken? Dies ist das Standardverhalten des Browsers. Glücklicherweise können wir mit JavaScript den Browser anweisen, dies nicht zu tun.
Der einfachste Weg, damit umzugehen, ist folgender:
$("a").on("click", function(event) ( event.preventDefault(); ));Sie werden sehen, dass diese Links nicht nach unten springen, wie Sie vielleicht denken:
Siehe den Stift a5aeaa4890837ac172605983324d5470 von Chris Coyier (@chriscoyier) auf CodePen
Seien Sie natürlich vorsichtig damit. Dadurch wird verhindert, dass ein Hash-Link über die Seite springt, aber es wird auch verhindert, dass ein normaler Link zu einer neuen URL wechselt. Verwenden Sie es also nur für Ankerlinks, von denen Sie wissen, dass Sie sie ausschließlich in Ihrem eigenen JavaScript verarbeiten möchten. Sie könnten Dinge wie eingrenzen $("a(href^='#')"). zB "Das href-Attribut des Links beginnt mit einem Hash."
Aber oft wirst du das auch sehen:
$("a").on("click", function() ( return false; ));Und das bewirkt dasselbe. Was hier passiert ist, dass das return false;tatsächlich zwei Dinge tut. Es macht das event.preventDefault();und es macht eine andere Sache:event.stopPropagation();
Sie können return false verwenden. Wenn Sie möchten, müssen Sie nur verstehen, was stopPropagation ist, und damit einverstanden sein. Normalerweise ist es am besten, die Propagation nicht zu stoppen, es sei denn, Sie wissen, dass Sie dies ausdrücklich tun möchten. Was es tut, ist das "Sprudeln" des DOM-Ereignisses zu stoppen. Zum Beispiel, wenn Sie DOM sind, ist wie folgt:
- Home
- About
- Clients
- Contact Us
Dann klicken Sie direkt auf das Wort „Home“. Dieses Klickereignis wird auf dem Ankerlink ausgelöst. Dann sprudelt es bis zum Listenelement, dann bis zur ungeordneten Liste und dann bis zum Navigationselement zum Dokument selbst.
Wenn Sie stopPropagation ausführen, hört das Sprudeln bei jedem Elementereignis, auf dem Sie es ausführen, dort auf. Sei dir nur bewusst!
Ich habe hier mehr über diesen Unterschied geschrieben.
Gegen Ende des Videos spreche ich davon, das Scrollen auf einem Element durch PreventDefault zu verhindern. Ich habe mich einfach total geirrt, dass du das machen kannst. Es ist einfach so, dass dies ein Ereignis ist, das man so nicht aufhalten kann. Es gibt Möglichkeiten, dies zu verhindern, z. B. CSS zu verwenden ( overflow: hidden;was seltsam sein könnte) oder ziemlich ausgefallen zu werden.