Ini muncul secara ringkas dalam video terakhir: bagaimana anda menghentikan penyemak imbas daripada melompat ke bawah ketika anda mengklik pautan hash? Itulah tingkah laku penyemak imbas lalai, dan untungnya, dengan JavaScript, kita dapat memberitahu penyemak imbas untuk tidak melakukan itu.
Cara paling mudah untuk mengatasinya adalah seperti ini:
$("a").on("click", function(event) ( event.preventDefault(); ));Anda akan melihat pautan ini tidak turun seperti yang anda fikir akan:
Lihat Pen a5aeaa4890837ac172605983324d5470 oleh Chris Coyier (@chriscoyier) di CodePen
Berhati-hati dengan itu walaupun sudah tentu. Itu akan menghentikan pautan hash daripada melompat ke bawah halaman, tetapi juga akan menghentikan pautan biasa dari pergi ke URL baru. Oleh itu, gunakannya hanya pada pautan sauh yang anda tahu bahawa anda mahu mengendalikannya secara eksklusif dalam JavaScript sendiri. Anda boleh menyempitkan perkara seperti $("a(href^='#')"). mis. "Atribut href pautan bermula dengan hash."
Tetapi selalunya anda akan melihatnya:
$("a").on("click", function() ( return false; ));Dan itu mencapai perkara yang sama. Apa yang berlaku di sini adalah bahawa return false;sebenarnya melakukan dua perkara. Ia melakukan event.preventDefault();dan melakukan perkara lain:event.stopPropagation();
Anda boleh menggunakan return false; jika anda mahu, anda hanya perlu memahami apa itu stopPropagation dan boleh melakukannya dengan betul Saya rasa selalunya lebih baik untuk tidak menghentikanPropagation melainkan anda tahu bahawa anda secara khusus mahu melakukannya. Apa yang dilakukannya adalah menghentikan "menggelegak" acara DOM. Contohnya jika anda DOM seperti ini:
- Home
- About
- Clients
- Contact Us
Kemudian anda klik tepat pada kata "Laman Utama", peristiwa klik itu akan mencetuskan pada pautan jangkar, kemudian ia akan naik ke item senarai, kemudian gelembung ke senarai yang tidak disusun, kemudian elemen nav, sepanjang jalan ke atas ke dokumen itu sendiri.
Apabila anda melakukan stopPropagation, pada acara elemen apa pun yang anda jalankan, gelembung akan berhenti di situ. Sedar sahaja!
Saya menulis lebih banyak mengenai perbezaan ini di sini.
Menjelang akhir video saya bercakap mengenai mencegah menatal pada elemen dengan preventDefault. Saya betul-betul salah bahawa anda boleh melakukan itu. Kebetulan itulah satu peristiwa yang anda tidak boleh berhenti seperti itu. Ada cara untuk mencegahnya seperti menggunakan CSS ( overflow: hidden;- yang mungkin pelik) - atau menjadi sangat mewah.