Klaus Paiva

São vários os motivos em que pode ser interessante descobrir qual o botão do mouse seu visitante usou para clicar em um elemento. E como muitos já sabem, eventos sofrem bastante com a falta de padronização entre os navegadores. Mas com as popularização das bibliotecas de Javascript, por exemplo jQuery, essa é uma tarefa relativamente fácil.

Seguindo as dicas encontradas no site do PPK, QuirksMode, podemos ver como identificar qual o botão usado pelo visitante. Traduzindo isso em código teríamos algo assim: (com jQuery disponível na página):

var left_button = 0;
var middle_button = 1;
var right_button = 2;
if( $.browser.msie )
{
  left_button = 1;
  middle_button = 4;
  right_button = 2;
}
$( "#container" ).mouseup(
  function( e )
  {
    var botao = "";
    if( e.button == middle_button )
    {
      botao = "meio (rodinha)";
    }
    else if( e.button == right_button )
    {
      botao = "direito (contexto)";
    }
    else
    {
      botao = "esquerdo (principal)";
    }
    alert ( "botão: " + botao );
  }
);

Um fator importante é que se você usar o evento click, a informação sobre o botão usado poderá não estar disponível e o código provavelmente não irá funcionar. Por isso é importante usar eventos como mousedown, mouseup. Aproveitei e fiz uma contribuição com a documentação da jQuery sobre eventos adicionando uma nota sobre o fato acima. =)

Se quiser ver o exemplo acima em uma página funcional, acesse este exemplo.

Nota: Ainda não tive tempo de testar o código em diversos navegadores, farei isso assim que possível. Testei no Firefox 3, no Firefox 2, IEs 7 e 6, e Safari 3, todos funcionam. Só no Opera 9.5 que o único botão "capturável" parece ser o botão esquerdo.