Skip to main content
2 de 4
adicionou 239 caracteres ao conteúdo
Gabriel Rodrigues
  • 16,2mil
  • 14
  • 62
  • 124

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 = $('.menu');
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    menu.css({
      "margin-left": e.clientX,
      "margin-top": e.clientY
    }).show();
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    menu.css({
      "margin-left": e.clientX,
      "margin-top": e.clientY
    }).show();
    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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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

Gabriel Rodrigues
  • 16,2mil
  • 14
  • 62
  • 124