Acciones prácticas: clickOutside, tooltip y autofocus
Cree acciones reutilizables para patrones habituales de interfaz
Acciones prácticas: clickOutside, tooltip y autofocus es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Acción clickOutside
Detecte los clics fuera de un elemento para cerrar menús y listas desplegables.
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); } };
}Utilice clickOutside
Pase una función de devolución de llamada que se ejecute cuando el usuario haga clic fuera.
<div use:clickOutside={() => open = false}>Acción autofocus
Enfoque un elemento al montarlo; es más limpio que usar bind:this + onMount.
function autofocus(node) { node.focus(); }Utilice autofocus
Aplíquelo a campos de entrada o a cualquier elemento que pueda recibir el foco.
<input use:autofocus />Acción tooltip
Muestre un tooltip al pasar el cursor. Encapsule los listeners y la creación del DOM en una sola acción.
Acción lazyLoad
Combine IntersectionObserver con use: para cargar imágenes de forma diferida.
Acción clickConfirm
Exija dos clics dentro de un intervalo para confirmar operaciones destructivas.
Reutilización entre componentes
Una vez escrita, una acción funciona en cualquier elemento compatible. Guárdelas en $lib/actions.
Bibliotecas de acciones
Paquetes como svelte-use incluyen decenas de acciones ya creadas.
Componga acciones
Aplique varias acciones a un elemento: use:autofocus use:clickOutside={close}.
Práctica recomendada
Mantenga las acciones centradas en un solo comportamiento. Combínelas para obtener efectos más completos.
Comprobación rápida
¿Qué necesita una acción clickOutside?
Resumen
Acciones prácticas como clickOutside, autofocus y tooltip muestran cómo encapsular comportamientos del DOM reutilizables.
Preguntas frecuentes
¿La lección «Acciones prácticas: clickOutside, tooltip y autofocus» es gratis?
Sí — el texto completo de «Acciones prácticas: clickOutside, tooltip y autofocus» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Acciones prácticas: clickOutside, tooltip y autofocus»?
Cree acciones reutilizables para patrones habituales de interfaz Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Acciones prácticas: clickOutside, tooltip y autofocus»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sintaxis de la directiva use:
- Parámetros y actualizaciones de acciones
- La función de limpieza destroy()
- Acciones prácticas: clickOutside, tooltip y autofocus