Como caputar o clique do botão direito com JavaScript

Neste artigo você vai aprender a como caputar o clique do botão direito com JavaScript, vamos utilizar uma simples estratégia

Capturar o clique do botão direito com JavaScript é uma tarefa simples e pode ser feita usando o evento “contextmenu”.

Este evento é acionado quando o botão direito do mouse é clicado em um elemento específico.

Para capturar o clique do botão direito em um elemento específico, você pode adicionar um ouvinte de eventos “contextmenu” a esse elemento.

Por exemplo, para capturar o clique do botão direito em uma div com o ID “myDiv”, você pode usar o seguinte código:

const myDiv = document.getElementById("myDiv");

myDiv.addEventListener("contextmenu", function(event) {
  // código a ser executado quando o botão direito é clicado
});

Além disso, você pode usar o método preventDefault() do evento para evitar que o menu de contexto padrão do navegador seja exibido. Por exemplo:

myDiv.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  // código a ser executado quando o botão direito é clicado
});

Você também pode usar o evento “mousedown” para capturar o clique do botão direito.

Neste caso, você precisaria verificar se o botão clicado é o botão direito usando a propriedade “which” ou “button” do evento. Por exemplo:

myDiv.addEventListener("mousedown", function(event) {
  if (event.which === 3 || event.button === 2) {
    // código a ser executado quando o botão direito é clicado
  }
});

Em resumo, capturar o clique do botão direito com JavaScript é uma tarefa simples que pode ser feita usando o evento “contextmenu” ou “mousedown”.

Certifique-se de evitar o menu de contexto padrão do navegador usando o método preventDefault() do evento.

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

E chegamos ao fim do nosso artigo sobre como caputar o clique do botão direito com JavaScript!

Em conclusão, capturar o clique do botão direito com JavaScript é uma tarefa simples que pode ser feita usando o evento “contextmenu” ou “mousedown”.

O evento “contextmenu” é acionado quando o botão direito do mouse é clicado em um elemento específico e permite adicionar um ouvinte de eventos para executar uma ação específica.

Também é possível evitar o menu de contexto padrão do navegador usando o método preventDefault() do evento.

Este recurso pode ser útil para criar interações personalizadas para o usuário e melhorar a experiência do usuário.

Com esse conhecimento, agora você pode adicionar facilmente esse recurso em seus projetos.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!