Ao definir manipuladores onClick em seu aplicativo de página única (Single Page Aapp), você provavelmente está usando as chamadas event.preventDefault(). Isso é bom. Você precisa disso quando o manipulador onClick é definido em um elemento âncora. Se você não impedir o evento padrão, o elemento âncora levará o usuário ao href definido e irá sobrepor a lógica do seu manipulador onClick.
Mas aqui está uma curiosidade…
Seus usuários podem querer realizar Ctrl + Clique (ou Command + Clique no Mac) em seus elementos âncora para abri-los em novas guias do navegador (ou janelas). Infelizmente, ter uma chamada incondicional ao event.preventDefault() nos seus manipuladores onClick impedirá que os usuários abram links em novas guias, e isso é irritante! Não faça isso.
Você só deve evitar o comportamento padrão em um evento onClick condicionalmente com:
if (!event.ctrlKey && !event.metaKey) {
event.preventDefault();
// Lógica da sua SPA
}
Dessa forma, seus usuários podem abrir seu link em uma nova guia ou clicar nele normalmente e sua lógica para navegação de página única irá ser executada.
Isso só funcionará se:
Seus links têm destinos href válidos (no lado do cliente, serão ignorados pela lógica da sua SPA)
Essas rotas são válidas/existem no seu servidor, para que os links funcionem quando os usuários o acessarem diretamente
Faça o teste… navegue para um novo destino com JavaScript em seu aplicativo, se você realizar uma atualização nessa página (F5 etc) e você permanece na mesma URL obtendo o mesmo estado do aplicativo? Se sim, você pode utilizar Ctrl + Clique.
Organizei uma sessão no playground para mostrar a diferença entre links com e sem essa importante declaração if. Você pode conferir em https://jsdrops.com/if-event.
Nota: Todos os manipuladores de eventos onClick na biblioteca jsComplete têm a instrução if acima. Ctrl-Clique em tudo!
Créditos ⭐️
- Do this in your onClick handlers. Please., escrito originalmente por Samer Buna
Top comments (0)