JavaScript: Por favor, adicione isso ao seu “onClick”

Eduardo Rabelo
Um pequeno `if` pode mudar toda a experiência do usuário!

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 ⭐️

Eduardo Rabelo

Written by

☕🇳🇿 - https://eduardorabelo.me

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade