Itu muncul sangat singkat di video terakhir: bagaimana Anda menghentikan peramban agar tidak melompat saat Anda mengeklik tautan hash? Itu adalah perilaku browser default, dan untungnya, dengan JavaScript, kita dapat memberi tahu browser untuk tidak melakukan itu.
Cara paling mudah untuk menanganinya adalah seperti ini:
$("a").on("click", function(event) ( event.preventDefault(); ));Anda akan melihat tautan ini tidak melompat seperti yang Anda pikirkan:
Lihat Pen a5aeaa4890837ac172605983324d5470 oleh Chris Coyier (@chriscoyier) di CodePen
Berhati-hatilah dengan itu tentu saja. Itu akan menghentikan tautan hash agar tidak melompat ke bawah halaman, tetapi itu juga akan menghentikan tautan biasa menuju ke URL baru. Jadi gunakan hanya pada tautan jangkar yang Anda tahu secara eksklusif ingin Anda tangani di JavaScript Anda sendiri. Anda bisa mempersempit hal-hal seperti $("a(href^='#')"). mis. "Atribut href dari tautan dimulai dengan hash."
Namun seringkali Anda juga akan melihat ini:
$("a").on("click", function() ( return false; ));Dan itu menyelesaikan hal yang sama. Apa yang terjadi di sini return false;sebenarnya adalah melakukan dua hal. Itu melakukan event.preventDefault();dan itu melakukan hal lain:event.stopPropagation();
Anda dapat menggunakan return false; jika Anda suka, Anda hanya perlu memahami apa itu stopPropagation dan boleh melakukannya. Biasanya yang terbaik adalah tidak menghentikan propagasi kecuali Anda tahu bahwa Anda secara khusus ingin melakukannya. Apa yang dilakukannya adalah menghentikan peristiwa DOM yang "menggelegak". Misalnya jika Anda DOM seperti ini:
- Home
- About
- Clients
- Contact Us
Kemudian Anda mengklik tepat di kanan kata "Beranda", peristiwa klik itu akan memicu tautan tautan, lalu akan menggelembung ke atas ke item daftar, lalu menggelembung ke atas ke daftar yang tidak diurutkan, lalu elemen navigasi, semuanya ke atas ke dokumen itu sendiri.
Saat Anda melakukan stopPropagation, di acara elemen apa pun tempat Anda menjalankannya, gelembung akan berhenti di situ. Waspadalah!
Saya menulis lebih banyak tentang perbedaan ini di sini.
Menjelang akhir video saya berbicara tentang mencegah pengguliran pada elemen dengan preventDefault. Saya benar-benar salah bahwa Anda bisa melakukan itu. Kebetulan satu peristiwa itu tidak bisa Anda hentikan seperti itu. Ada cara untuk mencegahnya seperti menggunakan CSS ( overflow: hidden;- yang mungkin aneh) - atau menjadi sangat mewah.