# 08: preventDefault, stopPropagation и return false - CSS-хитрости

Anonim

Это очень кратко всплыло в последнем видео: как сделать так, чтобы браузер не скатывался вниз, когда вы нажимаете хэш-ссылку? Это поведение браузера по умолчанию, и, к счастью, с помощью JavaScript мы можем запретить браузеру этого делать.

Самый простой способ справиться с этим:

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

Вы увидите, что эти ссылки не переходят вниз, как вы могли подумать:

Смотрите Pen 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
    •

Затем вы щелкаете прямо прямо на слове «Home», это событие click запускает привязку, затем оно всплывает до элемента списка, затем всплывает до неупорядоченного списка, а затем до элемента навигации, полностью вверх. к самому документу.

Когда вы выполняете stopPropagation, при любом событии элемента, в котором вы его запускаете, всплытие на этом останавливается. Просто имейте в виду!

Подробнее об этой разнице я писал здесь.

Ближе к концу видео я говорю о предотвращении прокрутки элемента с помощью preventDefault. Я был совершенно неправ, что ты мог это сделать. Так уж получилось, что это одно событие, которое нельзя так остановить. Есть способы предотвратить это, например, использовать CSS ( overflow: hidden;- что может быть странно) - или стать довольно необычным.