Detectando o clique do botão direito do mouse em Javascript

Os menus de contexto personalizados em páginas HTML são fundamentais para que se tenha o controle completo do comportamento da aplicação destas páginas.

Para fazê-lo, precisamos interceptar os eventos do mouse. A seguir temos um exemplo bem simples desta interceptação:

Existem dois pontos a se considerar para o controle do mouse e do menu de contexto dos navegadores. O ponto * 1 * contém a função de tratamento do evento citado no ponto * 2 *, que declara o evento onmousedown.

Executando a script (em formato de página HTML), e dando o clique direito do mouse, aparece a mensagem do comando alert:

Portanto, a propriedade button do evento de mouse corresponde a "2" para o botão direito do mouse. O botão esquerdo traz o valor "1".

Exemplo mostrando um menu de contexto bem básico

No ponto * 1 * declaramos a função init(). Nela declaramos a interceptação do evento "onmousedown", que se refere à função contextMenu.

No ponto * 2 * declaramos a função fecha() que vai fechar a janela de contexto da DIV cujo id é "menu".

No ponto * 3 * declaramos a função contextMenu(), que trata eventos provocados pelos botões do mouse. Se o botão for o direito, ela mostra a DIV cujo id é "menu".

No ponto * 4 *, interceptamos o evento "oncontextmenu", de modo que o menu de contexto default do navegador não seja apresentado (com as funções de copiar, colar, imprimir, etc).