7

Quando clicamos com o botão direito do mouse sobre determinadas áreas da página aparece o PopUp padrão dos navegadores:

Gostaria de mostrar meus próprios PopUps personalizados!

É possível interceptar o click e abrir um menu diferente?

Nota: Tenho preferência por JavaScript, mas se a solução for em JQuery será bem recebida!

0

4 Respostas 4

4

Para detectar o click do mouse direito utilizei o addEventListener e attachEvent desta forma a solução fica cross-browser.

Neste exemplo abro um simples menu, apenas removendo o display:none;

Exemplo:

var menu = document.querySelectorAll(".menu");
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    menu[0].style.display = 'block';
    menu[0].style.marginLeft = e.clientX + 'px';
    menu[0].style.marginTop = e.clientY + 'px';
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    menu[0].style.display = 'block';
    menu[0].style.marginLeft = e.clientX + 'px';
    menu[0].style.marginTop = e.clientY + 'px';
    window.event.returnValue = false;
  });
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  display: none;
}
li a {
  display: block;
  color: #000;
  padding: 8px 0 8px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #555;
  color: white;
}
<ul class="menu">
  <li><a href="#">Item 1</a>
  </li>
  <li><a href="#">Item 2</a>
  </li>
  <li><a href="#">Item 3</a>
  </li>
  <li><a href="#">Item 4</a>
  </li>
</ul>

Veja funcionando no jsfiddle

1
  • +1 hoje preciso de uma solução para todos os navegadores, a solução proposta pelo @renan seria ideal, pena não ser para todos! Commented 10/02/2016 às 17:47
3

Bom, eu uso em meu site, o código completo é este:

<!DOCTYPE html>
<html lang="br">
<head>
        <meta charset="utf-8">
        <title>Botão Direito</title>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <style>
                .rightclickmenu {
                        border: 1px solid #000;
                        position:absolute;
                        z-index:1;
                        font: 11px sans-serif;
                        display:none;
                }
                #rightclickobject {
                        padding: 10px;
                        width: 100px;
                        border-bottom: 1px solid #eee;
                        cursor:pointer;
                }
                #rightclickobject:hover {
                        background:#eee;
                }
        </style>
</head>
<body>

Clique em mim ou em qualquer lugar do site com o botão direto

<div class="rightclickmenu">

        <div id="rightclickobject" onclick="window.open('http://www.exatas.tk')">Portal de Exatas</div>
        <div id="rightclickobject" onclick="window.open('http://pt.stackoverflow.com/users/38968/vme?tab=profile')">Vme SOpt</div>
        <div id="rightclickobject">Nada</div>
        <div id="rightclickobject" onclick="window.open('https://www.youtube.com/watch?v=kzOkza_u3Z8')">Baile de favela</div>
</div>
<script type="text/javascript">
   window.addEventListener('contextmenu', function(e) {
                $('.rightclickmenu').css({
                        "margin-left": e.clientX,
                        "margin-top": e.clientY
                }).show()
 
                e.preventDefault();
                window.addEventListener('click', function(){
                        $('.rightclickmenu').hide();
                })
   })
 
</script>
</body>
</html>

Resultado (quase todos os botões estão com link's, funcionam perfeitamente, mas o sistema do S.O. faz com que eles não abram na resposta): inserir a descrição da imagem aqui

2
  • +1 pela ajuda, realmente ficou bom! Commented 10/02/2016 às 17:49
  • Feliz em poder ajudar. Commented 10/02/2016 às 17:53
2
$(document).mousedown(function(event) {
  switch (event.which) {
    case 1:
      alert('Tecla Esquerda');
      break;
    case 2:
      alert('Tecla do Meio');
      break;
    case 3:
      alert('Tecla Direita');
      break;
    default:
      alert('nope');
  }
});

Com este codigo consegues detectar que tecla do rato foi clicada. Agora só precisas de adicionar codigo ao lado direito de maneira a aparecer a tua popup. Em principio isto irá ajudar-te.

E desculpa pelo jQuery, mas só sei assim! Já agora, se quiseres exprimentar, pega nesse codigo e coloca na consola do browser. Conseguirás ver logo o codigo em execução.

Cumprimentos e boa sorte!

2

A forma que conheço de criar um menu de contexto personalizado é, prevenir o comportamento padrão do navegador e "desenhar" as opções do menu com HTML e CSS. Por exemplo:

document.addEventListener('contextmenu', function(event){
  event.preventDefault();
  
  // Aqui você desenha e exibe seu menu feito com html/css.

}, false);
Clique com o botão esquerdo.

E aí você pega a posição x e y de onde ocorreu o evento de click e abre o menu a partir daquele ponto.

Na especificação há uma proposta que permite criar menus para serem usados em toda a página ou em um elemento (div, section, etc) em especifico. Mas suportado atualmente somente pelo Firefox. Se estiver usando o FF e executar o snippet abaixo, verá que foi adicioda uma opção no menu de contexto:

html, body { width: 100%; height: 100%; margin: 0; padding: 0 }
<body contextmenu="sopt-menu">Clique com o botão direito <b>(somente FIREFOX)</b>.</body>

<menu type="context" id="sopt-menu">
  <menuitem label="Homepage" icon="https://i.sstatic.net/QoVP1.png"></menuitem>
  <menuitem label="Acessar o Meta" icon="https://i.sstatic.net/QoVP1.png"></menuitem>
  <menu label="Compartilhar esta pergunta">
    <menuitem label="Twitter" icon="https://i.sstatic.net/GcF12.png"></menuitem>
    <menuitem label="Facebook" icon="https://i.sstatic.net/crcC5.png"></menuitem>
  </menu>
</menu>

Para quem não puder executar, o resultado é este:

Exemplo de menu de contexto.

2
  • 1
    +1,Não sabia dessa,pena que é compatível apenas no Firefox. Commented 10/02/2016 às 17:01
  • @renan, +1 obrigado pela iniciativa, Show de bola, uma pena não ser para todos os navegadores! Obrigado! Commented 10/02/2016 às 17:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .