Como capturar o evento de clique com o botão direito do mouse em JavaScript

Quando um usuário clica com o botão direito do mou. Os desenvolvedores geralmente precisam tomar alguma ação quando um usuário executa um clique com o botão direito em um elemento de aplicativo da web. Portanto, eles devem rastrear/capturar o clique com o botão direito do mouse no site.

Este tutorial ilustrará o procedimento para capturar o evento de clique com o botão direito do mouse em JavaScript.

Como capturar o evento de clique com o botão direito do mouse em JavaScript?

Use o "janela.addEventListener ()”Método passando o evento“menu contextual”. Sempre que o usuário tenta iniciar um menu de contexto clicando no botão direito do mouse, o evento contextmenu é acionado.

Exemplo 1: Capture o evento do clique com o botão direito usando o método addEventListener () com o método alert ()

Para capturar um clique com o botão direito do mouse em uma página da web, use o “janela.addEventListener ()”Método para anexar/adicionar um manipulador de eventos a um elemento. Em seguida, mostre o resultado de que o usuário clica com o botão direito do mouse na página usando o “alerta()”Método. Ele exibirá a mensagem em uma caixa de diálogo que aparecerá na tela com o “OK" botão:

janela.addEventListener ('contextmenu', (evento) =>
alerta ('mouse com o botão direito do mouse');
);

A saída exibe uma mensagem de alerta quando clicamos com o botão direito do mouse na página e abre o menu de contexto padrão:

Exemplo 2: Capture o evento do clique com o botão direito usando o método addEventListener () com console.Método log ()

Aqui, capturaremos o evento com o botão direito do mouse e produziremos uma mensagem para o console:

janela.addEventListener ('contextmenu', (evento) =>
console.log ('mouse mouse com o botão direito do mouse');
);

Saída

Exemplo 3: restrinja o clique com o botão direito do mouse para exibir o menu padrão

Neste exemplo, veremos restringir o menu de contexto padrão para abrir no clique com o botão direito do mouse usando o “PreventDefault ()”Método:

janela.addEventListener ('contextmenu', (evento) =>
evento.prevenvDefault ();
alerta ('clique com o botão direito do mouse é evitado');
);

Como você pode ver na saída, o menu de contexto padrão não aparece no clique com o botão direito do mouse:

Exemplo 4: Abra o menu de contexto personalizado no mouse clique com o botão direito do mouse

Aqui, a saída mostra um menu de contexto personalizado no evento de clique com o botão direito do mouse. Mais especificamente, siga o link para criar um menu de contexto personalizado:

Isso se trata de capturar o evento com o botão direito do mouse em JavaScript.

Conclusão

Para capturar o evento de clique com o botão direito do mouse em JavaScript, use o “janela.addEventListener ()”Método passando o evento“menu contextual”. O evento contextmenu é acionado quando um usuário tenta iniciar um menu de contexto clicando no botão direito do mouse. Neste tutorial, ilustramos o procedimento para capturar o evento de clique com o botão direito do mouse em JavaScript.