Skip to main content
Mudei meu username do jsfiddle(edição para manter link ativo)
Fonte Link
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 = 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 jsfiddlejsfiddle

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

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

adicionou 4 caracteres ao conteúdo
Fonte Link
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 = $document.querySelectorAll('".menu'menu");
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    menumenu[0].css({
style.display = 'block';
    "margin-left":menu[0].style.marginLeft = e.clientX,
 + 'px';
    "margin-top":menu[0].style.marginTop = e.clientY
   + }).show();'px';
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    menumenu[0].css({
style.display = 'block';
    "margin-left":menu[0].style.marginLeft = e.clientX,
 + 'px';
    "margin-top":menu[0].style.marginTop = e.clientY
   + }).show();'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;
}
<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 jsfiddlejsfiddle

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

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

adicionou 239 caracteres ao conteúdo
Fonte Link
Gabriel Rodrigues
  • 16,2mil
  • 14
  • 62
  • 124

Para Detectardetectar 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;display:none;

Exemplo:

var menu = document.querySelectorAll$("'.menu"menu');
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    menu[0]menu.stylecss({
      "margin-left": e.displayclientX,
 = 'block';    "margin-top": e.clientY
    }).show();
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    menu[0]menu.stylecss({
      "margin-left": e.displayclientX,
 = 'block';    "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;
}
/* Change the link color on hover */

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="#home">Home<href="#">Item 1</a>
  </li>
  <li><a href="#news">News<href="#">Item 2</a>
  </li>
  <li><a href="#contact">Contact<href="#">Item 3</a>
  </li>
  <li><a href="#about">About<href="#">Item 4</a>
  </li>
</ul>

Veja funcionando no jsfiddle

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';
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    menu[0].style.display = 'block';
    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;
}
/* Change the link color on hover */

li a:hover {
  background-color: #555;
  color: white;
}
<ul class="menu">
  <li><a href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>

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

Fonte Link
Gabriel Rodrigues
  • 16,2mil
  • 14
  • 62
  • 124
Carregando