Como adicionar um menu personalizado com o botão direito em uma página da web?

291

Quero adicionar um menu personalizado com o botão direito ao meu aplicativo da web. Isso pode ser feito sem o uso de bibliotecas pré-criadas? Em caso afirmativo, como exibir um menu simples com o botão direito do mouse personalizado que não usa uma biblioteca JavaScript de terceiros?

Estou buscando algo parecido com o que o Google Docs faz. Permite que os usuários cliquem com o botão direito do mouse e mostrem aos usuários seu próprio menu.

OBSERVAÇÃO: quero aprender como criar meu próprio versus usar algo que alguém já criou desde a maior parte do tempo, essas bibliotecas de terceiros estão cheias de recursos, enquanto eu só quero os recursos que eu preciso, então quero que seja completamente feito à mão por mim.

javascript contextmenu right-click Usuário Registrado
fonte
3
apenas tropeçou em: davidwalsh.name/html5-context-menu love HTML5
TD_Nijboer
2
Definitivamente, isso não é uma duplicata. Como a pergunta requer respostas sem bibliotecas de terceiros, é provável que a outra use o Jquery (eu queria escrever um contexto de unidade do Google, como o menu de contexto dentro de um script de usuário) .
user2284570
só hoje encontrei mais dois bons exemplos (eu acho) sobre isso: DEMO 1 // DEMO 2 (esta demo precisa de uma interface de usuário jquery ) Espero ajudar alguém, bb.
Drako
2
Só quero salientar que o menu de contexto HTML5 é suportado apenas em algumas versões do Firefox e, tanto quanto posso dizer, nada mais o suporta. O Chrome a partir da versão 61 não é compatível.
22417 Dan Willett
2
Para as pessoas que usam o React - o menu nativo replica todas as funcionalidades existentes (copie, abra em uma nova guia, pesquise no google etc.) enquanto parece nativo (aplica estilos diferentes, dependendo do navegador). demo
samdd 15/03

Respostas:

247

Respondendo à sua pergunta - use o contextmenuevento, como abaixo:

if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    alert("You've tried to open context menu"); //here you draw your own menu
    e.preventDefault();
  }, false);
} else {
  document.attachEvent('oncontextmenu', function() {
    alert("You've tried to open context menu");
    window.event.returnValue = false;
  });
}
<body>
  Lorem ipsum...
</body>
Expandir snippet

Mas você deve se perguntar se realmente deseja substituir o comportamento padrão do botão direito do mouse - isso depende do aplicativo que você está desenvolvendo.

JSFIDDLE

Radek Benkel
fonte
12
Testado no Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (todos os 4 via addEventListener) e IE 8 (attachEvent).
Radek Benkel
54
Você acabou de explicar como desativar o menu do botão direito. Como criar nosso próprio menu ??
Shashwat 16/09/12
13
@Shashwat Você conhece o local onde o usuário clicou e você não tem o menu original. Crie um contêiner nesse local e exiba seu menu lá.
Radek Benkel
2
Está correto: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Document também é um elemento.
Radek Benkel
4
@shanehoban Quando você olha para o código, verá esta linha e.preventDefault();. É por isso que o menu regular não é exibido. O que você pode fazer é criar alguma lógica condicional que verifique se a tecla é pressionada enquanto clica com o botão direito do mouse e depois NÃO chama e.preventDefault()- você receberá um menu regular do navegador.
Radek Benkel 28/11
54

Foi muito útil para mim. Para o bem de pessoas como eu, esperando o desenho do menu, coloquei aqui o código que usei para fazer o menu do botão direito:

$(document).ready(function() {


  if ($("#test").addEventListener) {
    $("#test").addEventListener('contextmenu', function(e) {
      alert("You've tried to open context menu"); //here you draw your own menu
      e.preventDefault();
    }, false);
  } else {

    //document.getElementById("test").attachEvent('oncontextmenu', function() {
    //$(".test").bind('contextmenu', function() {
    $('body').on('contextmenu', 'a.test', function() {


      //alert("contextmenu"+event);
      document.getElementById("rmenu").className = "show";
      document.getElementById("rmenu").style.top = mouseY(event) + 'px';
      document.getElementById("rmenu").style.left = mouseX(event) + 'px';

      window.event.returnValue = false;


    });
  }

});

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});



function mouseX(evt) {
  if (evt.pageX) {
    return evt.pageX;
  } else if (evt.clientX) {
    return evt.clientX + (document.documentElement.scrollLeft ?
      document.documentElement.scrollLeft :
      document.body.scrollLeft);
  } else {
    return null;
  }
}

function mouseY(evt) {
  if (evt.pageY) {
    return evt.pageY;
  } else if (evt.clientY) {
    return evt.clientY + (document.documentElement.scrollTop ?
      document.documentElement.scrollTop :
      document.body.scrollTop);
  } else {
    return null;
  }
}
.show {
  z-index: 1000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid blue;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}
<!-- jQuery should be at least version 1.7 -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="contextmenu.js"></script>
<link rel="stylesheet" href="contextmenu.css" />


<div id="test1">
  <a href="www.google.com" class="test">Google</a>
  <a href="www.google.com" class="test">Link 2</a>
  <a href="www.google.com" class="test">Link 3</a>
  <a href="www.google.com" class="test">Link 4</a>
</div>

<!-- initially hidden right-click menu -->
<div class="hide" id="rmenu">
  <ul>
    <li>
      <a href="http://www.google.com">Google</a>
    </li>

    <li>
      <a href="http://localhost:8080/login">Localhost</a>
    </li>

    <li>
      <a href="C:\">C</a>
    </li>
  </ul>
</div>
Expandir snippet

Mohamed Iqzas
fonte
7
@Schism Suffixed mouseY(event)and mouseX(event)with pxpara fazê-lo funcionar como esperado: http://jsfiddle.net/a6w7n64o/ .
Zanetu 13/03/2015
3
Você está referenciando um elemento pelo ID de, testmas não há nenhum elemento pelo ID de test. Apenas elementos com a classe de test.
The Duke Of Marshall
1
@ Adelphia - Qualquer coisa que não seja nativa e não criada por você é de terceiros. jQueryrealmente não é tão inchado com coisas extras. Não na medida em que atrasaria qualquer coisa. É muito útil e o mesmo jQueryusado nesta resposta pode ser facilmente convertido em JavaScriptcomandos padrão . Pode não estar 100% alinhado com a solicitação na pergunta original, mas é definitivamente 95% alinhado com ela.
The Duke Of Marshall # 8/15
6
No firefox 39, o menu de contexto padrão ainda aparece na parte superior do menu personalizado. Além disso, o menu personalizado é descartado instantaneamente após a exibição.
Matt
1
@ Matt: Eu tive o mesmo problema com o Firefox 58. Este post descreve uma solução que funciona para mim: stackoverflow.com/a/40545465/2922675 Você desativa a propagação de eventos para o documento e registra seu manipulador de menu de contexto no objeto de janela . Aqui está um violino ajustado: jsfiddle.net/jjgkLe3g/1
Nils-o-mat
27

Uma combinação de algumas CSS agradáveis ​​e algumas tags html não padrão sem bibliotecas externas pode fornecer um bom resultado (JSFiddle)

HTML

<menu id="ctxMenu">
    <menu title="File">
        <menu title="Save"></menu>
        <menu title="Save As"></menu>
        <menu title="Open"></menu>
    </menu>
    <menu title="Edit">
        <menu title="Cut"></menu>
        <menu title="Copy"></menu>
        <menu title="Paste"></menu>
    </menu>
</menu>

Nota: a tag do menu não existe, eu estou inventando (você pode usar qualquer coisa)

CSS

#ctxMenu{
    display:none;
    z-index:100;
}
menu {
    position:absolute;
    display:block;
    left:0px;
    top:0px;
    height:20px;
    width:20px;
    padding:0;
    margin:0;
    border:1px solid;
    background-color:white;
    font-weight:normal;
    white-space:nowrap;
}
menu:hover{
    background-color:#eef;
    font-weight:bold;
}
menu:hover > menu{
    display:block;
}
menu > menu{
    display:none;
    position:relative;
    top:-20px;
    left:100%;
    width:55px;
}
menu[title]:before{
    content:attr(title);
}
menu:not([title]):before{
    content:"\2630";
}

O JavaScript é apenas para este exemplo, eu o removo pessoalmente para menus persistentes no Windows

var notepad = document.getElementById("notepad");
notepad.addEventListener("contextmenu",function(event){
    event.preventDefault();
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "block";
    ctxMenu.style.left = (event.pageX - 10)+"px";
    ctxMenu.style.top = (event.pageY - 10)+"px";
},false);
notepad.addEventListener("click",function(event){
    var ctxMenu = document.getElementById("ctxMenu");
    ctxMenu.style.display = "";
    ctxMenu.style.left = "";
    ctxMenu.style.top = "";
},false);

Além disso, note que você pode potencialmente modificar menu > menu{left:100%;}a menu > menu{right:100%;}para um menu que se expande de direita para a esquerda. Você precisaria adicionar uma margem ou algo em algum lugar

Isaac
fonte
20

De acordo com as respostas aqui e em outros 'fluxos', criei uma versão que se parece com a do Google Chrome, com transição css3. JS Fiddle

Vamos começar ansiosos, já que temos os js acima nesta página, podemos nos preocupar com o CSS e o layout. O layout que usaremos é um <a>elemento com um <img>ícone impressionante de elemento ou fonte ( <i class="fa fa-flag"></i>) e um <span>para mostrar os atalhos do teclado. Então esta é a estrutura:

<a href="#" onclick="doSomething()">
  <img src="path/to/image.gif" />
  This is a menu option
  <span>Ctrl + K</span>
</a>

Vamos colocá-los em uma div e mostrar essa div com o botão direito. Vamos estilizá-los como no Google Chrome, sim?

#menu a {
  display: block;
  color: #555;
  text-decoration: no[...]

Agora vamos adicionar o código da resposta aceita e obter os valores X e Y do cursor. Para fazer isso, usaremos e.clientXe e.clientY. Como estamos usando o cliente, o menu div deve ser corrigido.

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.client[...]

E é isso aí! Basta adicionar as transições de css para entrar e sair, e pronto!

Mostrar snippet de código

Stephan Stanisic
fonte
Isso me salvou uma enorme dor de cabeça! Se OP estava procurando uma maneira simples para uso em página inteira e não apenas um div, esta deve ser a resposta aceite :)
Woody
12

Você pode tentar simplesmente bloquear o menu de contexto adicionando o seguinte à sua etiqueta corporal:

<body oncontextmenu="return false;">

Isso bloqueará todo o acesso ao menu de contexto (não apenas com o botão direito do mouse, mas também com o teclado).

PS, você pode adicioná-lo a qualquer tag na qual deseja desativar o menu de contexto

por exemplo:

<div class="mydiv" oncontextmenu="return false;">

Desabilitará o menu de contexto somente nessa div específica

by0
fonte
10 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>

<title>Context menu - LabLogic.net</title>

</head>
<body>

<script language="javascript" type="text/javascript">

document.oncontextmenu=RightMouseDown;
document.onmousedown = mouseDown; 



function mouseDown(e) {
    if (e.which==3) {//righClick
        alert("Right-click menu goes here");
    }
}


function RightMouseDown() { return false; }

</script>

</body>
</html>

Testado e funciona no Opera 11.6, firefox 9.01, Internet Explorer 9 e chrome 17 Você pode conferir uma amostra de trabalho no menu javascript com botão direito

LabLogic
fonte
Funciona, mas o menu de demonstração na sua página é realmente pequeno e apertado. Bom exemplo, no entanto.
David Millar
2
Funciona se você estiver usando um mouse de três botões. A tecla Ctrl pressionada deixa o usuário alto e seco. @ Singles tem uma sugestão melhor, mesmo que deixe um pouco para a imaginação.
AJFarkas
7

Sei que isso já foi respondido, mas passei algum tempo lutando com a segunda resposta para que o menu de contexto nativo desapareça e ele apareça onde o usuário clicou.
HTML

<body>
    <div id="test1">
        <a href="www.google.com" class="test">Google</a>
        <a href="www.google.com" class="test">Link 2</a>
        <a href="www.google.com" class="test">Link 3</a>
        <a href="www.google.com" class="test">Link 4</a>
    </div>

    <!-- initially hidden right-click menu -->
    <div class="hide" id="rmenu">
        <ul>
            <li class="White">White</li>
            <li>Green</li>
            <li>Yellow</li>
            <li>Orange</li>
            <li>Red</li>
            <li>Blue</li>
        </ul>
    </div>
</body>

CSS

.hide {
  display: none;
}

#rmenu {
  border: 1px solid black;
  background-color: white;
}

#rmenu ul {
  padding: 0;
  list-style: none;
}
#rmenu li
{
  list-style: none;
  padding-left: 5px;
  padding-right: 5px;
}

Javascript

if (document.getElementById('test1').addEventListener) {
    document.getElementById('test1').addEventListener('contextmenu', function(e) {
            $("#rmenu").toggleClass("hide");
            $("#rmenu").css(
              {
                position: "absolute",
                top: e.pageY,
                left: e.pageX
              }
            );
            e.preventDefault();
     }, false);
}

// this is from another SO post...  
$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});

Exemplo de CodePen

Kristen Nielsen
fonte
6

Tente isto

$(function() {
var doubleClicked = false;
$(document).on("contextmenu", function (e) {
if(doubleClicked == false) {
e.preventDefault(); // To prevent the default context menu.
var windowHeight = $(window).height()/2;
var windowWidth = $(window).width()/2;
if(e.clientY > windowHeight && e.clientX <= windowWidth) {
  $("#contextMenuContainer").css("left", e.clientX);
  $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
  $("#contextMenuContainer").css("right", "auto");
  $("#contextMenuContainer").css("top", "auto");
} else if(e.clientY > windowHeight && e.clientX > windowWidth) {
  $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
  $("#contextMenuContainer").css("bottom", $(window).height()-e.clientY);
  $("#contextMenuContainer").css("left", "auto");
  $("#contextMenuContainer").css("top", "auto");
} else if(e.clientY <= windowHeight && e.clientX <= windowWidth) {
  $("#contextMenuContainer").css("left", e.clientX);
  $("#contextMenuContainer").css("top", e.clientY);
  $("#contextMenuContainer").css("right", "auto");
  $("#contextMenuContainer").css("bottom", "auto");
} else {
  $("#contextMenuContainer").css("right", $(window).width()-e.clientX);
  $("#contextMenuContainer").css("top", e.clientY);
  $("#contextMenuContainer").css("left", "auto");
  $("#contextMenuContainer").css("bottom", "auto");
}
 $("#contextMenuContainer").fadeIn(500, FocusContextOut());
  doubleClicked = true;
} else {
  e.preventDefault();
  doubleClicked = false;
  $("#contextMenuContainer").fadeOut(500);
}
});
function FocusContextOut() {
 $(document).on("click", function () {
   doubleClicked = false; 
   $("#contextMenuContainer").fadeOut(500);
   $(document).off("click");           
 });
}
});

http://jsfiddle.net/AkshayBandivadekar/zakn7Lwb/14/

AkshayBandivadekar
fonte
O código é ótimo, mas inclua uma descrição sobre qual é realmente o problema dos OPs e como isso o soluciona.
Rory McCrossan
Eu gosto dessa solução, no entanto, no Firefox 39, o menu é descartado por si só logo após a criação.
Matt
Essa solução não funciona se você forçar a página a rolar (digamos, adicione várias tags) e esteja em algum lugar na parte inferior.
DanielM
Você deve usar clientX e clientY em vez de pageX e pageY para que isso funcione; confira este grande resposta: stackoverflow.com/questions/9262741/...
DanielM
Sim, DanielM, há um problema no menu do botão direito durante a rolagem, então isso é superado usando clientX e clientY em vez de pageX e pageY, fiz alterações no código. Obrigado pela ajuda ...
AkshayBandivadekar
5

Solução pura de JS e CSS para um menu de contexto verdadeiramente dinâmico com clique com o botão direito do mouse, embora com base em convenções de nomenclatura predefinidas para a identificação dos elementos, links etc. jsfiddle e o código que você pode copiar e colar em uma única página estática de html:

<html>

<head>
  <style>
    .cls-context-menu-link {
      display: block;
      padding: 20px;
      background: #ECECEC;
    }
    
    .cls-context-menu {
      position: absolute;
      display: none;
    }
    
    .cls-context-menu ul,
    #context-menu li {
      list-style: none;
      margin: 0;
      padding: 0;
      background: white;
    }
    
    .cls-context-menu {
      border: solid 1px #CCC;
    }
    
    .cls-context-menu li {
      border-bottom: solid 1px #CCC;
    }
    
    .cls-context-menu li:last-child {
      border: none;
    }
    
    .cls-context-menu li a {
      display: block;
      padding: 5px 10px;
      text-decoration: none;
      color: blue;
    }
    
    .cls-context-menu li a:hover {
      background: blue;
      color: #FFF;
    }
  </style>
</head>

<body>

  <!-- those are the links which should present the dynamic context menu -->
  <a id="link-1" href="#" class="cls-context-menu-link">right click link-01</a>
  <a id="link-2" href="#" class="cls-context-menu-link">right click link-02</a>

  <!-- this is the context menu -->
  <!-- note the string to=0 where the 0 is the digit to be replaced -->
  <div id="div-context-menu" class="cls-context-menu">
    <ul>
      <li><a href="#to=0">link-to=0 -item-1 </a></li>
      <li><a href="#to=0">link-to=0 -item-2 </a></li>
      <li><a href="#to=0">link-to=0 -item-3 </a></li>
    </ul>
  </div>

  <script>
    var rgtClickContextMenu = document.getElementById('div-context-menu');

    /** close the right click context menu on click anywhere else in the page*/
    document.onclick = function(e) {
      rgtClickContextMenu.style.display = 'none';
    }

    /**
     present the right click context menu ONLY for the elements having the right class
     by replacing the 0 or any digit after the "to-" string with the element id , which
     triggered the event
    */
    document.oncontextmenu = function(e) {
      //alert(e.target.id)
      var elmnt = e.target
      if (elmnt.className.startsWith("cls-context-menu")) {
        e.preventDefault();
        var eid = elmnt.id.replace(/link-/, "")
        rgtClickContextMenu.style.left = e.pageX + 'px'
        rgtClickContextMenu.style.top = e.pageY + 'px'
        rgtClickContextMenu.style.display = 'block'
        var toRepl = "to=" + eid.toString()
        rgtClickContextMenu.innerHTML = rgtClickContextMenu.innerHTML.replace(/to=\d+/g, toRepl)
        //alert(rgtClickContextMenu.innerHTML.toString())
      }
    }
  </script>
</body>

</html>
Expandir snippet

Yordan Georgiev
fonte
Isso é mais a resposta que eu estava esperando, um exemplo realmente modificar o menu do botão direito
Jesse Reza Khorasanee
Sim, um exemplo semelhante poderia ser: codepen.io/yordangeorgiev/pen/GzWJzd e o produto final: qto.fi/qto/view/concepts_doc (basta clicar no login ...)
Yordan Georgiev
3

Aqui está um tutorial muito bom sobre como criar um menu de contexto personalizado com um exemplo de código de trabalho completo (sem JQuery e outras bibliotecas).

Você também pode encontrar o código de demonstração no GitHub .

Eles fornecem uma explicação passo a passo detalhada que você pode seguir para criar seu próprio menu de contexto com o botão direito do mouse (incluindo código html, css e javascript) e resumir no final, fornecendo o código de exemplo completo.

Você pode acompanhar facilmente e adaptá-lo às suas próprias necessidades. E não há necessidade de JQuery ou outras bibliotecas.

É assim que o código de menu de exemplo se parece:

<nav id="context-menu" class="context-menu">
    <ul class="context-menu__items">
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="View"><i class="fa fa-eye"></i> View Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Edit"><i class="fa fa-edit"></i> Edit Task</a>
      </li>
      <li class="context-menu__item">
        <a href="#" class="context-menu__link" data-action="Delete"><i class="fa fa-times"></i> Delete Task</a>
      </li>
    </ul>
  </nav>

Um exemplo de trabalho (lista de tarefas) pode ser encontrado no codepen .

Força de vontade
fonte
Um breve resumo ajudaria os revisores (como eu) a julgar a validade de sua resposta e pode impedir que alguns leitores sigam esse link. Apenas uma ou duas frases seriam boas e não seriam muito trabalhosas.
Ingo Karkat 04/10
@IngoKarkat Obrigado pelo seu conselho. Eu adicionei alguma explicação. Espero que você ache isto útil. Isto me ajudou bastante.
ForceOfWill 04/10
2

Você pode fazer isso com este código. visite aqui para obter um tutorial completo com detecção automática de borda http://www.voidtricks.com/custom-right-click-context-menu/ 

$(document).ready(function () {
 $("html").on("contextmenu",function(e){
        //prevent default context menu for right click
        e.preventDefault();

        var menu = $(".menu"); 

        //hide menu if already shown
        menu.hide(); 

        //get x and y values of the click event
        var pageX = e.pageX;
        var pageY = e.pageY;

        //position menu div near mouse cliked area
        menu.css({top: pageY , left: pageX});

        var mwidth = menu.width();
        var mheight = menu.height();
        var screenWidth = $(window).width();
        var screenHeight = $(window).height();

        //if window is scrolled
        var scrTop = $(window).scrollTop();

        //if the menu is close to right edge of the window
        if(pageX+mwidth > screenWidth){
        menu.css({left:pageX-mwidth});
        }

        //if the menu is close to bottom edge of the window
        if(pageY+mheight > screenHeight+scrTop){
        menu.css({top:pageY-mheight});
        }

        //finally show the menu
        menu.show();
 }); 

 $("html").on("click", function(){
 $(".menu").hide();
 });
 });

`

Anand Roshan
fonte
1 
<script language="javascript" type="text/javascript">
  document.oncontextmenu = RightMouseDown; 
  document.onmousedown = mouseDown; 

  function mouseDown(e) {
    if (e.which==3) {//righClick
      alert("Right-click menu goes here");
    } 
  }

  function RightMouseDown() { 
    return false; 
  }
</script>
</body> 
</html>
Graham Allen
fonte
2
Você sei que há um oncontextmenuevento que é demitido (geralmente do botão direito)
megawac
1

Uma maneira simples de fazer isso é usar onContextMenu para retornar uma função JavaScript:

<input type="button" value="Example" onContextMenu="return RightClickFunction();">

<script>
 function RightClickFunction() {
  // Enter your code here;
  return false;
 }
</script>

E entrando return false; você cancelará o menu de contexto.

Se você ainda deseja exibir o menu de contexto, basta remover a return false;linha.

ÉpicoNinjaQueijo
fonte
1

Testado e funciona no Opera 12.17, firefox 30, Internet Explorer 9 e chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
raphpell
fonte
1
Essa projeção não mostraria um alerta quando o menu de contexto aparecer? Não vejo como isso iria personalizá-lo.
Stephen Ostermiller
1 
<script>
function fun(){
document.getElementById('menu').style.display="block";
}

</script>
<div id="menu" style="display: none"> menu items</div>

<body oncontextmenu="fun();return false;">

O que estou fazendo aqui em cima

  1. Crie seu próprio menu div personalizado e defina a posição: absoluta e exibição: nenhuma no caso.
  2. Adicione à página ou elemento a ser clicado no evento oncontextmenu.
  3. Cancele a ação padrão do navegador com retorno false.

  4. O usuário js invoca suas próprias ações.

Chris Enitan
fonte
0

Você deve se lembrar de que se deseja usar a solução somente do Firefox, se deseja adicioná-lo a todo o documento, deve adicionar contextmenu="mymenu"à <html>tag e não à bodytag.
Você deve prestar atenção nisso.

WowOWwoW
fonte
0 
<html>
<head>
<style>
.rightclick {
    /* YOUR CONTEXTMENU'S CSS */
    visibility: hidden;
    background-color: white;
    border: 1px solid grey;
    width: 200px;
    height: 300px;
}
</style>
</head>
<body>
  <div class="rightclick" id="ya">
    <p onclick="alert('choc-a-late')">I like chocolate</p><br><p onclick="awe-so-me">I AM AWESOME</p>
  </div>
  <p>Right click to get sweet results!</p>
</body>
<script>
    document.onclick = noClick;
    document.oncontextmenu = rightClick;
    function rightClick(e) {
        e = e || window.event;
        e.preventDefault();
        document.getElementById("ya").style.visibility = "visible";
        console.log("Context Menu v1.3.0 by IamGuest opened.");
   }
function noClick() {
    document.getElementById("ya").style.visibility = "hidden";
    console.log("Context Menu v1.3.0 by IamGuest closed.");
}
</script>
<!-- Coded by IamGuest. Thank you for using this code! -->
</html>

Você pode ajustar e modificar esse código para criar um menu de contexto mais eficiente e com melhor aparência. Quanto à modificação de um menu de contexto existente, não tenho certeza de como fazer isso ... Confira este violino para um ponto de vista organizado. Além disso, tente clicar nos itens no meu menu de contexto. Eles devem alertar algumas mensagens impressionantes. Se eles não funcionarem, tente algo mais ... complexo.

Cannicide
fonte
0

Eu uso algo semelhante ao seguinte jsfiddle

function onright(el, cb) {
    //disable right click
    document.body.oncontextmenu = 'return false';
    el.addEventListener('contextmenu', function (e) { e.preventDefault(); return false });
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        if (~~(e.button) === 2) {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
            return false;
        }
    });

    // then bind Your cb
    el.addEventListener('mousedown', function (e) {
        e = e || window.event;
        ~~(e.button) === 2 && cb.call(el, e);
    });
}

se você segmentar navegadores IE mais antigos, deverá concluí-lo com o 'attachEvent; caso

fedeghe
fonte