Ações práticas: clickOutside tooltip autofocus
Crie ações reutilizáveis para padrões comuns de interface presentes em aplicações reais.
Ações práticas: clickOutside tooltip autofocus é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Ação clickOutside
Detecte cliques fora de um elemento para fechar menus e listas suspensas.
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); } };
}Usar clickOutside
Passe uma função de retorno de chamada que seja executada quando o usuário clicar fora.
<div use:clickOutside={() => open = false}>Ação de foco automático
Coloque um elemento em foco durante a montagem; é mais simples do que usar bind:this + onMount.
function autofocus(node) { node.focus(); }Usar o foco automático
Aplique a entradas ou a qualquer elemento que possa receber foco.
<input use:autofocus />Ação de dica de ferramenta
Exiba uma dica de ferramenta ao passar o cursor. Encapsule os ouvintes e a criação do DOM em uma única ação.
Ação lazyLoad
Combine IntersectionObserver com use: para carregar imagens sob demanda.
Ação clickConfirm
Exija dois cliques dentro de um intervalo para confirmar operações destrutivas.
Reutilizar entre componentes
Depois de escrita, uma ação funciona em qualquer elemento compatível. Armazene-as em $lib/actions.
Bibliotecas de ações
Pacotes como svelte-use fornecem dezenas de ações pré-criadas.
Compor ações
Aplique várias ações a um elemento: use:autofocus use:clickOutside={close}.
Boa prática
Mantenha as ações concentradas em um único comportamento. Faça composições para obter efeitos mais elaborados.
Verificação rápida
De que uma ação clickOutside precisa?
Recapitulação
Ações práticas como clickOutside, autofocus e tooltip mostram como encapsular comportamentos reutilizáveis do DOM.
Perguntas Frequentes
A aula “Ações práticas: clickOutside tooltip autofocus” é grátis?
Sim — o texto completo de “Ações práticas: clickOutside tooltip autofocus” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Ações práticas: clickOutside tooltip autofocus”?
Crie ações reutilizáveis para padrões comuns de interface presentes em aplicações reais. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Ações práticas: clickOutside tooltip autofocus”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe da diretiva use:
- Parâmetros e atualizações de ações
- A função de limpeza destroy()
- Ações práticas: clickOutside tooltip autofocus