action Praktis: clickOutside tooltip autofocus
Bangun action yang dapat digunakan ulang untuk pola UI umum di dunia nyata.
action Praktis: clickOutside tooltip autofocus adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Aksi clickOutside
Deteksi klik di luar elemen untuk menutup menu dan daftar pilihan.
function clickOutside(node, cb) {
function handler(e) { if (!node.contains(e.target)) cb(); }
document.addEventListener("click", handler, true);
return { destroy() { document.removeEventListener("click", handler, true); } };
}Gunakan clickOutside
Berikan fungsi panggilan balik yang dijalankan saat pengguna mengeklik di luar.
<div use:clickOutside={() => open = false}>Aksi fokus otomatis
Fokuskan elemen saat dipasang; cara ini lebih bersih daripada bind:this + onMount.
function autofocus(node) { node.focus(); }Gunakan fokus otomatis
Terapkan pada masukan atau elemen apa pun yang dapat menerima fokus.
<input use:autofocus />Aksi keterangan alat
Tampilkan keterangan alat saat kursor diarahkan ke elemen. Bungkus pendengar dan pembuatan DOM dalam satu aksi.
Aksi lazyLoad
Gabungkan IntersectionObserver dengan use: untuk memuat gambar secara malas.
Aksi clickConfirm
Wajibkan dua klik dalam jangka waktu tertentu untuk mengonfirmasi operasi yang merusak data.
Gunakan Ulang di Seluruh Komponen
Setelah ditulis, sebuah aksi dapat digunakan pada elemen kompatibel mana pun. Simpan aksi tersebut di $lib/actions.
Pustaka Aksi
Paket seperti svelte-use menyediakan puluhan aksi siap pakai.
Gabungkan Aksi
Terapkan beberapa aksi pada satu elemen: use:autofocus use:clickOutside={close}.
Praktik Terbaik
Jaga agar setiap aksi berfokus pada satu perilaku. Gabungkan aksi untuk menghasilkan efek yang lebih kaya.
Pemeriksaan Singkat
Apa yang diperlukan oleh aksi clickOutside?
Rangkuman
Aksi praktis seperti clickOutside, fokus otomatis, dan keterangan alat menunjukkan cara membungkus perilaku DOM yang dapat digunakan kembali.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “action Praktis: clickOutside tooltip autofocus” gratis?
Ya — teks lengkap “action Praktis: clickOutside tooltip autofocus” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “action Praktis: clickOutside tooltip autofocus”?
Bangun action yang dapat digunakan ulang untuk pola UI umum di dunia nyata. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “action Praktis: clickOutside tooltip autofocus” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Sintaks Direktif use:
- Parameter dan Pembaruan action
- Fungsi Pembersihan destroy()
- action Praktis: clickOutside tooltip autofocus