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