Son videoda çok kısaca ortaya çıktı: bir hash bağlantısını tıkladığınızda tarayıcının aşağı atlamasını nasıl durdurursunuz? Varsayılan tarayıcı davranışı budur ve neyse ki JavaScript ile tarayıcıya bunu yapmamasını söyleyebiliriz.
Bunu halletmenin en basit yolu şudur:
$("a").on("click", function(event) ( event.preventDefault(); ));Bu bağlantıların düşündüğünüz gibi aşağı atlamadığını göreceksiniz:
CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen a5aeaa4890837ac172605983324d5470'e bakın
Elbette buna dikkat et. Bu, bir hash bağlantısının sayfadan aşağı atlamasını durduracak, ancak aynı zamanda normal bir bağlantının yeni bir URL'ye gitmesini de durduracaktır. Bu nedenle, yalnızca kendi JavaScript'inizde özel olarak işlemek istediğinizi bildiğiniz bağlantı bağlantılarında kullanın. İşleri gibi daraltabilirsin $("a(href^='#')"). ör. "Bağlantının href niteliği bir karmayla başlar."
Ancak sıklıkla bunu da göreceksiniz:
$("a").on("click", function() ( return false; ));Ve bu aynı şeyi başarır. Burada olan şey return false;, aslında iki şey yapıyor olmasıdır. O yapıyor event.preventDefault();ve başka bir şey yapıyor:event.stopPropagation();
Return false kullanabilirsiniz; İsterseniz, sadece yayılmanın ne olduğunu anlamanız ve bunu yaparken tamam olmanız gerekir. Özellikle bunu yapmak istediğinizi bilmiyorsanız, genellikle en iyisinin yayımı durdurmamak olduğunu düşünüyorum. Yaptığı şey, DOM olayının "köpürmesini" durdurmaktır. Örneğin, DOM sizseniz:
- Home
- About
- Clients
- Contact Us
Ardından "Ana Sayfa" kelimesinin tam sağına tıklarsınız, bu tıklama etkinliği bağlantı bağlantısında tetiklenir, sonra liste öğesi olarak kabarır, sonra sıralanmamış listeye, ardından gezinme öğesine tüm yol boyunca kabarır belgenin kendisine.
StopPropagation'ı yaptığınızda, onu çalıştırdığınız öğe ne olursa olsun, köpürme orada duracaktır. Sadece farkında olun!
Burada bu fark hakkında daha fazla yazdım.
Videonun sonuna doğru, preventDefault ile bir öğenin kaydırılmasını önlemekten bahsediyorum. Bunu yapabileceğin konusunda tamamen yanılmışım. Öyle oluyor ki, bu şekilde duramayacağın bir olay. Bunu önlemenin CSS kullanmak gibi ( overflow: hidden;- tuhaf olabilir) - veya oldukça süslü olmak gibi yolları vardır .