Це вийшло дуже коротко в останньому відео: як зупинити браузер від стрибка вниз, натиснувши хеш-посилання? Це поведінка браузера за замовчуванням, і, на щастя, за допомогою JavaScript ми можемо сказати браузеру не робити цього.
Найпростіший спосіб вирішити це так:
$("a").on("click", function(event) ( event.preventDefault(); ));Ви побачите, що ці посилання не стрибають вниз, як ви могли б подумати:
Дивіться Ручку a5aeaa4890837ac172605983324d5470 Кріса Койєра (@chriscoyier) на CodePen
Будьте обережні з цим, хоча, звичайно. Це зупинить скачування хеш-посилання по сторінці, але також зупинить перехід звичайного посилання на нову URL-адресу. Тож використовуйте його лише на якірних посиланнях, які, як ви знаєте, ви хочете обробляти виключно у своєму JavaScript. Ви можете звузити речі, як $("a(href^='#')"). наприклад "Атрибут href посилання починається з хешу."
Але часто ви побачите і це:
$("a").on("click", function() ( return false; ));І це робить те саме. Тут відбувається те, що return false;насправді робить дві речі. Він робить event.preventDefault();і робить іншу справу:event.stopPropagation();
Ви можете використовувати return false; якщо вам подобається, вам просто потрібно зрозуміти, що таке stopPropagation, і погодитися з цим. Я вважаю, що найкраще не зупиняти розповсюдження, якщо ви не знаєте, що конкретно хочете це зробити. Що він робить, це зупиняє “бульбашки” події DOM. Наприклад, якщо ви DOM, це так:
- Home
- About
- Clients
- Contact Us
Потім ви натискаєте прямо на слово «Домашня сторінка», що подія натискання спрацьовує на прив’язаному посиланні, потім вона з’являється до елемента списку, потім з’являється міхур до невпорядкованого списку, потім елемент навігації, аж до кінця до самого документа.
Коли ви зупините StopPropagation, під час будь-якої події елемента, на якій ви це запустите, міхур на цьому зупиниться. Тільки будьте в курсі!
Я більше писав про цю різницю тут.
Ближче до кінця відео я розповідаю про запобігання прокрутці елемента за допомогою prevenDefault. Я просто абсолютно помилявся, що ти міг це зробити. Так трапляється, що це одна подія, яку не можна зупиняти так. Є способи запобігти цьому, наприклад, використовувати CSS ( overflow: hidden;- що може бути дивно) - або стати досить фантастичним.