Como diferenciar click do botão esquerdo e direito com JavaScript

Neste artigo você vai aprender a como diferenciar click do botão esquerdo e direito com JavaScript, utilizando eventos de DOM

Fala programador(a), beleza? Bora aprender mais sobre eventos de mouse e JavaScript!

Basicamente temos uma forma de detectar cada botão do mouse quando pressionado

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Vamos utilizar o evento mousedown em document

E então podemos receber o feedback do argumento de evento no método

Acessando a propriedade buttons que é retornada, temos alguns valores que podemos explorar, que são:

• 1: botão esquerdo;
• 2: botão direito;
• 3: botão esquerdo e direito;
• 4: botão central;

Veja como podemos aplicar isso no código:

document.addEventListener("mousedown", function(e) {
    switch(e.buttons) {
      case 1: 
      	console.log("Left button")
        break
      case 2:
      	console.log("Right button")
        break
      case 3:
      	console.log("Left and Right button")
        break
      case 4: 
      	console.log("Middle button")
        break
    }
});

Veja que aplicamos um switch case, mas você pode utilizar um if e else, se preferir

Desta maneira é possível identificar cada um dos botões do mouse do usuário, e realizar alguma lógica baseado no botão pressionado

Conclusão

Neste artigo você aprendeu a como diferenciar click do botão esquerdo e direito em JS

Utilizamos o evento mousedown em document

Podemos identificar os códigos de cada um dos botões, que vão do número 1 ao 4

Note que você pode utilizar qualquer estrutura de condição para checar o botão que foi pressionado pelo usuário

E aí realizar a lógica do seu sistema =)

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!