Pojawiło się to bardzo krótko w ostatnim filmie: jak powstrzymać przeglądarkę przed przeskakiwaniem po kliknięciu linku z krzyżykiem? To jest domyślne zachowanie przeglądarki i na szczęście dzięki JavaScriptowi możemy powiedzieć przeglądarce, aby tego nie robiła.
Najprostszy sposób na rozwiązanie tego problemu wygląda następująco:
$("a").on("click", function(event) ( event.preventDefault(); ));Zobaczysz, że te linki nie przeskakują w dół, jak mogłoby się wydawać:
Zobacz pióro a5aeaa4890837ac172605983324d5470 autorstwa Chrisa Coyiera (@chriscoyier) na CodePen
Oczywiście uważaj na to. Zapobiegnie to przeskakiwaniu linku z krzyżykiem w dół strony, ale także zwykłemu odsyłaczowi do nowego adresu URL. Więc używaj go tylko na linkach zakotwiczonych, o których wiesz, że chcesz obsługiwać wyłącznie w swoim własnym JavaScript. Możesz zawęzić takie rzeczy $("a(href^='#')"). np. „Atrybut href linku zaczyna się od krzyżyka”.
Ale często to też zobaczysz:
$("a").on("click", function() ( return false; ));I to prowadzi do tego samego. To, co się tutaj dzieje, to fakt, że return false;faktycznie robi dwie rzeczy. Robi event.preventDefault();i robi inną rzecz:event.stopPropagation();
Możesz użyć funkcji return false; jeśli chcesz, po prostu musisz zrozumieć, czym jest stopPropagation i nie przeszkadzać mu w tym. Zwykle uważam, że najlepiej nie przerywać propagacji, chyba że wiesz, że chcesz to zrobić. Zatrzymuje „bulgotanie” zdarzenia DOM. Na przykład, jeśli jesteś DOM, wygląda to tak:
- Home
- About
- Clients
- Contact Us
Następnie klikasz prosto na słowo „Strona główna”, to zdarzenie kliknięcia wywoła link zakotwiczenia, a następnie pojawi się na liście, a następnie na liście nieuporządkowanej, a następnie na elemencie nawigacyjnym aż do góry do samego dokumentu.
Kiedy wykonasz stopPropagation, na jakimkolwiek zdarzeniu elementu, na którym to uruchomisz, propagacja zatrzyma się w tym miejscu. Po prostu uważaj!
Więcej o tej różnicy pisałem tutaj.
Pod koniec nagrania mówię o zapobieganiu przewijaniu elementu przez PreventionDefault. Całkowicie się myliłem, że możesz to zrobić. Tak się składa, że to jedyne wydarzenie, którego nie można tak zatrzymać. Istnieją sposoby, aby temu zapobiec, takie jak użycie CSS ( overflow: hidden;- co może być dziwne) - lub całkiem wymyślne.