¿Cómo agregar un menú de clic derecho personalizado a una página web?

291

Quiero agregar un menú de clic derecho personalizado a mi aplicación web. ¿Se puede hacer esto sin usar bibliotecas preconstruidas? Si es así, ¿cómo mostrar un menú de clic derecho personalizado simple que no utiliza una biblioteca de JavaScript de terceros?

Estoy apuntando a algo como lo que hace Google Docs. Permite a los usuarios hacer clic derecho y mostrarles su propio menú.

NOTA: Quiero aprender a hacer mi propio en lugar de usar algo que alguien hizo ya que la mayoría de las veces, esas bibliotecas de terceros están llenas de características, mientras que solo quiero las características que necesito, así que quiero que estén completamente hechas a mano por yo.

javascript  contextmenu  right-click 
— usuario registrado
fuente
3
me topé con: davidwalsh.name/html5-context-menu love HTML5
— TD_Nijboer
2
Esto definitivamente no es un duplicado. Como la pregunta requiere respuestas sin bibliotecas de terceros, y es probable que la otra use Jquery (quería escribir un disco contextual de Google como menú contextual dentro de un script de usuario) .
— user2284570
justo hoy encontré dos buenos ejemplos más (creo) sobre esto: DEMO 1 // DEMO 2 (esta demo necesita jquery UI ) Espero que sea de ayuda para cualquiera, bb.
— Drako el
2
Solo quiero señalar que el menú contextual HTML5 solo es compatible con algunas versiones de Firefox y, por lo que puedo decir, nada más lo admite. Chrome a partir de la versión 61 no lo admite.
— Dan Willett
2
Para las personas que usan React: el menú nativo replica todas las funciones existentes (copiar, abrir en una pestaña nueva, buscar en Google, etc.) mientras se ve nativo (aplica diferentes estilos según el navegador). demo
— samdd

Respuestas:

247

Responda su pregunta: use el contextmenuevento, como a continuación:

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 fragmento

Pero debe preguntarse si realmente desea sobrescribir el comportamiento predeterminado del clic derecho; depende de la aplicación que esté desarrollando.

JSFIDDLE

— Radek Benkel
fuente
12
Probado en Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (los 4 a través de addEventListener) e IE 8 (attachEvent).
— Radek Benkel
54
Acaba de explicar cómo deshabilitar el menú contextual. ¿Cómo crear nuestro propio menú?
— Shashwat
13
@ Shashwat Conoces el lugar, donde el usuario ha hecho clic y no tienes el menú original. Crea un contenedor en ese lugar y muestra tu menú allí.
— Radek Benkel
2
Es correcto: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Document también es un elemento.
— Radek Benkel
44
@shanehoban Cuando mires el código, verás esta línea e.preventDefault();. Por eso no se muestra el menú normal. Lo que puede hacer es crear una lógica condicional que verifique, si se presiona la tecla mientras se hace clic derecho y luego NO se llama e.preventDefault(), obtendrá el menú normal del navegador.
— Radek Benkel
54

Fue muy útil para mi. Por el bien de personas como yo, esperando el dibujo del menú, puse aquí el código que usé para hacer el menú del botón derecho:

$(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 fragmento

— Mohamed Iqzas
fuente
77
@Schism con el sufijo mouseY(event)y mouseX(event)con pxhacer que funcione como se esperaba: http://jsfiddle.net/a6w7n64o/ .
— zanetu
3
Estás haciendo referencia a un elemento por la identificación de testpero no hay ningún elemento por la identificación de test. Solo elementos con la clase de test.
— The Duke Of Marshall שלום
1
@Adelphia - Cualquier cosa que no sea nativa y que no haya sido creada por usted es un tercero. jQueryrealmente no está tan hinchado con cosas extra. No en la medida en que ralentizaría algo. Es muy útil y lo mismo jQueryutilizado en esta respuesta podría convertirse fácilmente en JavaScriptcomandos estándar . Puede que no esté 100% en línea con la solicitud en la pregunta original, pero definitivamente está 95% en línea con ella.
— The Duke Of Marshall שלום
66
En Firefox 39, el menú contextual predeterminado todavía aparece en la parte superior del menú personalizado. Además, el menú personalizado se cierra instantáneamente después de mostrarse.
— Matt
1
@Matt Tuve el mismo problema con Firefox 58. Esta publicación describe una solución, que funciona para mí: stackoverflow.com/a/40545465/2922675 Deshabilita la propagación de eventos para el documento y registra su controlador de menú contextual en el objeto de la ventana . Aquí hay un violín ajustado: jsfiddle.net/jjgkLe3g/1
— Nils-o-mat
27

Una combinación de un buen CSS y algunas etiquetas html no estándar sin bibliotecas externas puede dar un buen 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: la etiqueta del menú no existe, la estoy inventando (puedes usar cualquier cosa)

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";
}

El JavaScript es solo para este ejemplo, personalmente lo elimino para los menús persistentes en 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);

También tenga en cuenta, que potencialmente puede modificar menu > menu{left:100%;}a menu > menu{right:100%;}un menú que se expande de derecha a izquierda. Sin embargo, deberá agregar un margen o algo en alguna parte

— Isaac
fuente
20

De acuerdo con las respuestas aquí y en otros flujos, he creado una versión que se parece a la de Google Chrome, con transición css3. JS Fiddle

Comencemos de manera fácil, ya que tenemos los js arriba en esta página, podemos preocuparnos por el CSS y el diseño. El diseño que utilizaremos es un <a>elemento con un <img>elemento o un icono de fuente impresionante ( <i class="fa fa-flag"></i>) y una <span>para mostrar los atajos de teclado. Entonces esta es la estructura:

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

Los pondremos en un div y mostraremos ese div en el clic derecho. Vamos a diseñarlos como en Google Chrome, ¿de acuerdo?

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

Ahora agregaremos el código de la respuesta aceptada y obtendremos el valor X e Y del cursor. Para hacer esto, usaremos e.clientXy e.clientY. Estamos utilizando el cliente, por lo que el menú div debe ser reparado.

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

¡Y eso es todo! ¡Solo agregue las transiciones css para fundirse y desaparecer, y listo!

Mostrar fragmento de código

— Stephan Stanisic
fuente
¡Esto me salvó un gran dolor de cabeza! Si OP estaba buscando una manera simple de usar en toda la página web y no solo un div, esta respuesta debería aceptarse :)
— Woody
12

Puede intentar simplemente bloquear el menú contextual agregando lo siguiente a su etiqueta de cuerpo:

<body oncontextmenu="return false;">

Esto bloqueará todo acceso al menú contextual (no solo desde el botón derecho del mouse sino también desde el teclado).

PD: puede agregar esto a cualquier etiqueta en la que desee deshabilitar el menú contextual

por ejemplo:

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

Deshabilitará el menú contextual en ese div en particular solamente

— por0
fuente
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>

Probado y funciona en Opera 11.6, firefox 9.01, Internet Explorer 9 y Chrome 17 Puede consultar una muestra de trabajo en el menú de clic derecho de JavaScript

— LabLogic
fuente
Funciona, pero el menú de demostración en su página es realmente pequeño y estrecho. Buen ejemplo, sin embargo.
— David Millar
2
Funciona si estás usando un mouse de tres botones. Ctrl-clic deja al usuario alto y seco. @Singles tiene una mejor sugerencia, incluso si deja un poco a la imaginación.
— AJFarkas
7

Sé que esto ya ha sido respondido, pero pasé un tiempo luchando con la segunda respuesta para que desapareciera el menú contextual nativo y que apareciera donde el usuario hizo clic.
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";
});

Ejemplo de CodePen

— Kristen Nielsen
fuente
6

Prueba esto

$(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
fuente
El código es excelente, pero incluya una descripción sobre cuál es realmente el problema de los OP y cómo lo resuelve.
— Rory McCrossan
Me gusta esta solución, sin embargo, en Firefox 39, el menú desaparece por sí solo después de que aparece.
— Matt
Esta solución en realidad no funciona si fuerza a la página a tener un desplazamiento (digamos que agrega un montón de etiquetas <br>) y está en algún lugar en la parte inferior de la misma.
— DanielM
Debería usar clientX y clientY en lugar de pageX y pageY para que esto funcione;
— mira
Sí, DanielM, hay un problema con el menú del botón derecho mientras se desplaza, por lo que esto se supera al usar clientX y clientY en lugar de pageX y pageY, hice cambios en el código. Gracias por la ayuda ...
— AkshayBandivadekar
5

Solución pura de JS y CSS para un menú contextual de clic derecho verdaderamente dinámico, aunque basado en convenciones de nomenclatura predefinidas para la identificación de elementos, enlaces, etc. jsfiddle y el código que puede copiar y pegar en una sola página estática 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 fragmento

— Yordan Georgiev
fuente
Esta es más la respuesta que esperaba, un ejemplo que modifica el menú del botón derecho
— Jesse Reza Khorasanee
sí, un ejemplo similar podría ser: codepen.io/yordangeorgiev/pen/GzWJzd y el producto final: qto.fi/qto/view/concepts_doc (simplemente haga clic en el inicio de sesión ...)
— Yordan Georgiev
3

Aquí hay un muy buen tutorial sobre cómo construir un menú contextual personalizado con un ejemplo de código de trabajo completo (sin JQuery y otras bibliotecas).

También puede encontrar su código de demostración en GitHub .

Proporcionan una explicación detallada paso a paso que puede seguir para crear su propio menú contextual con el botón derecho (incluido el código html, css y javascript) y resumirlo al final dando el código de ejemplo completo.

Puede seguirlo fácilmente y adaptarlo a sus propias necesidades. Y no hay necesidad de JQuery u otras bibliotecas.

Así es como se ve su código de menú de ejemplo:

<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>

Un ejemplo de trabajo (lista de tareas) se puede encontrar en codepen .

— Fuerza de voluntad
fuente
Un breve resumen ayudaría a los revisores (como yo) a juzgar la validez de su respuesta, y puede evitar que algunos lectores sigan ese enlace. Solo una o dos oraciones estarían bien y no demasiado trabajo.
— Ingo Karkat
@IngoKarkat Gracias por tu consejo. Agregué alguna explicación. Espero que encuentres esto útil. Me ayudó mucho.
— ForceOfWill
2

Puedes hacerlo con este código. visite aquí para obtener un tutorial completo con detección automática de bordes 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
fuente
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
fuente
2
Sabes que hay un oncontextmenuevento que se dispara (generalmente con el botón derecho)
— megawac
1

Una manera simple de hacerlo es usar onContextMenu para devolver una función de JavaScript:

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

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

Y al ingresar return false;, cancelará el menú contextual.

si aún desea mostrar el menú contextual, simplemente puede eliminar la return false;línea.

— ÉpicoNinjaQueso
fuente
1

Probado y funciona en Opera 12.17, firefox 30, Internet Explorer 9 y Chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— raphpell
fuente
1
¿No se muestra una alerta cuando aparece el menú contextual? No veo cómo lo personalizaría.
— 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;">

Lo que estoy haciendo aquí

  1. Cree su propio menú div personalizado y establezca la posición: absoluta y mostrar: ninguna en el caso.
  2. Agregue a la página o elemento para hacer clic en el evento oncontextmenu.
  3. Cancele la acción predeterminada del navegador con return false.

  4. Usuario js para invocar sus propias acciones.

— Chris Enitan
fuente
0

Debe recordar que si desea utilizar la única solución de Firefox, si desea agregarla a todo el documento, debe agregarla contextmenu="mymenu"a la <html>etiqueta, no a la bodyetiqueta.
Deberías prestar atención a esto.

— WOWOWwoW
fuente
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>

Puede modificar y modificar este código para crear un menú contextual más eficiente y de mejor aspecto. En cuanto a la modificación de un menú contextual existente, no estoy seguro de cómo hacerlo ... Mira este violín para un punto de vista organizado. Además, intente hacer clic en los elementos en mi menú contextual. Deben alertarle de algunos mensajes increíbles. Si no funcionan, intente algo más ... complejo.

— Canicidio
fuente
0

Yo uso algo similar al siguiente 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);
    });
}

si se dirige a navegadores IE más antiguos, debe completarlo con el 'attachEvent; caso

— fedeghe
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.