DEV Community 👩‍💻👨‍💻

Cover image for JavaScript: Por favor, adicione isso ao seu "onClick"
Eduardo Rabelo
Eduardo Rabelo

Posted on

JavaScript: Por favor, adicione isso ao seu "onClick"

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

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.