# 08: prevenDefault, stopPropagation и return false - CSS-трикове

Anonim

Той се появи съвсем накратко в последното видео: как да спрете браузъра да скача надолу, когато щракнете върху хеш връзка? Това е поведението на браузъра по подразбиране и за щастие, с JavaScript можем да кажем на браузъра да не го прави.

Най-ясният начин за справяне с него е по следния начин:

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

Ще видите, че тези връзки не скачат надолу, както си мислите, че би:

Вижте писалката a5aeaa4890837ac172605983324d5470 от Chris Coyier (@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;- което може да е странно) - или да получите доста фантазия.