Comment ajouter un menu de clic droit personnalisé à une page Web?

291

Je veux ajouter un menu contextuel personnalisé à mon application Web. Cela peut-il être fait sans utiliser de bibliothèques prédéfinies? Si tel est le cas, comment afficher un simple menu de clic droit personnalisé qui n'utilise pas de bibliothèque JavaScript tierce?

Je vise quelque chose comme ce que fait Google Docs. Il permet aux utilisateurs de cliquer avec le bouton droit et de montrer aux utilisateurs leur propre menu.

REMARQUE: je veux apprendre à créer le mien plutôt que d'utiliser quelque chose que quelqu'un a déjà fait depuis la plupart du temps, ces bibliothèques tierces sont remplies de fonctionnalités alors que je ne veux que les fonctionnalités dont j'ai besoin, je veux donc qu'elles soient entièrement faites à la main par moi.

javascript contextmenu right-click Utilisateur enregistré
la source
3
vient de tomber sur: davidwalsh.name/html5-context-menu love HTML5
TD_Nijboer
2
Ce n'est certainement pas un doublon. Comme la question nécessite des réponses sans bibliothèques tierces, et l'autre est susceptible d'utiliser Jquery (je voulais écrire un lecteur contextuel comme le menu contextuel de Google dans un script utilisateur) .
user2284570
juste aujourd'hui, j'ai trouvé deux autres bons exemples (je pense) à ce sujet: DEMO 1 // DEMO 2 (cette démo a besoin de l' interface utilisateur jquery ) J'espère aider n'importe qui, bb.
Drako
2
Je veux juste souligner que le menu contextuel HTML5 n'est pris en charge que dans certaines versions de Firefox et pour autant que je sache, rien d'autre ne le prend en charge. Chrome à partir de la version 61 ne le prend pas en charge.
Dan Willett
2
Pour les personnes utilisant React - le menu natif reproduit toutes les fonctionnalités existantes (copier, ouvrir dans un nouvel onglet, rechercher sur Google, etc.) tout en ayant une apparence native (applique différents styles en fonction du navigateur). démo
samdd

Réponses:

247

Répondre à votre question - utilisez l' contextmenuévénement, comme ci-dessous:

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>
Développer l'extrait

Mais vous devriez vous demander si vous voulez vraiment remplacer le comportement de clic droit par défaut - cela dépend de l'application que vous développez.

JSFIDDLE

Radek Benkel
la source
12
Testé sur Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (tous les 4 via addEventListener) et IE 8 (attachEvent).
Radek Benkel
54
Vous venez d'expliquer comment désactiver le menu contextuel. Comment créer notre propre menu ??
Shashwat
13
@Shashwat Vous connaissez l'endroit, où l'utilisateur a cliqué, et vous n'avez pas de menu original. Créez un conteneur à cet endroit et affichez-y votre menu.
Radek Benkel
2
C'est correct: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Le document est également un élément.
Radek Benkel
4
@shanehoban Lorsque vous regardez dans le code, vous verrez cette ligne e.preventDefault();. C'est pourquoi le menu régulier n'est pas affiché. Ce que vous pouvez faire est de créer une logique conditionnelle qui vérifie, si vous appuyez sur la touche tout en cliquant avec le bouton droit puis en n'appelant pas e.preventDefault()- vous obtiendrez alors un menu de navigateur régulier.
Radek Benkel
54

Cela m'a été très utile. Pour le bien des gens comme moi, attendant le dessin du menu, je mets ici le code que j'ai utilisé pour faire le menu clic droit:

$(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>
Développer l'extrait

Mohamed Iqzas
la source
7
@Schism Suffixed mouseY(event)et mouseX(event)avec pxpour le faire fonctionner comme prévu: http://jsfiddle.net/a6w7n64o/ .
zanetu
3
Vous faites référence à un élément par l'id de testmais il n'y a aucun élément par l'id de test. Seuls les éléments avec la classe de test.
The Duke Of Marshall
1
@Adelphia - Tout ce qui n'est pas natif et non créé par vous-même est un tiers. jQueryn'est vraiment pas tout à fait gonflé de trucs supplémentaires. Pas dans la mesure où cela ralentirait quoi que ce soit. C'est très utile et la même chose jQueryutilisée dans cette réponse pourrait facilement être convertie en JavaScriptcommandes standard . Ce n'est peut-être pas 100% en ligne avec la demande de la question d'origine, mais c'est certainement 95% en ligne avec elle.
The Duke Of Marshall
6
Dans Firefox 39, le menu contextuel par défaut apparaît toujours en haut du menu personnalisé. De plus, le menu personnalisé disparaît instantanément après l'affichage.
Matt
1
@Matt J'ai eu le même problème avec Firefox 58. Cet article décrit une solution qui fonctionne pour moi: stackoverflow.com/a/40545465/2922675 Vous désactivez la propagation d'événements pour le document et enregistrez votre gestionnaire de menu contextuel sur l'objet fenêtre . Voici un violon ajusté: jsfiddle.net/jjgkLe3g/1
Nils-o-mat
27

Une combinaison de quelques CSS agréables et de balises html non standard sans bibliothèque externe peut donner un bon résultat (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>

Remarque: la balise de menu n'existe pas, je l'invente (vous pouvez utiliser n'importe quoi)

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

Le JavaScript est juste pour cet exemple, je le supprime personnellement pour les menus persistants sur 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);

Notez également, vous pouvez modifier potentiellement menu > menu{left:100%;}à menu > menu{right:100%;}un menu qui étend de droite à gauche. Vous devrez cependant ajouter une marge ou quelque chose quelque part

Isaac
la source
20

Selon les réponses ici et sur d'autres flux, j'ai fait une version qui ressemble à celle de Google Chrome, avec transition css3. JS Fiddle

Commençons eazy, puisque nous avons les js ci-dessus sur cette page, nous pouvons nous soucier du CSS et de la mise en page. La disposition que nous utiliserons est un <a>élément avec un <img>élément ou une icône géniale de police ( <i class="fa fa-flag"></i>) et un <span>pour afficher les raccourcis clavier. Voici donc la structure:

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

Nous allons les mettre dans un div et montrer ce div sur le clic droit. Stylons-les comme dans Google Chrome, d'accord?

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

Maintenant, nous allons ajouter le code de la réponse acceptée et obtenir la valeur X et Y du curseur. Pour ce faire, nous utiliserons e.clientXet e.clientY. Nous utilisons le client, donc le div du menu doit être corrigé.

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

Et c'est tout! Ajoutez simplement les transitions CSS pour faire un fondu avant et arrière, et c'est fait!

Afficher l'extrait de code

Stephan Stanisic
la source
Cela m'a sauvé un énorme mal de tête! Si OP cherchait un moyen simple à utiliser sur toute la page Web et pas seulement un div, cela devrait être accepté comme réponse :)
Woody
12

Vous pouvez simplement bloquer le menu contextuel en ajoutant ce qui suit à votre balise body:

<body oncontextmenu="return false;">

Cela bloquera tout accès au menu contextuel (pas seulement à partir du bouton droit de la souris mais aussi du clavier).

PS, vous pouvez l'ajouter à n'importe quelle balise sur laquelle vous souhaitez désactiver le menu contextuel

par exemple:

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

Désactivera le menu contextuel dans ce div particulier seulement

by0
la source
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>

Testé et fonctionne dans Opera 11.6, firefox 9.01, Internet Explorer 9 et chrome 17 Vous pouvez consulter un exemple de travail dans le menu contextuel javascript

LabLogic
la source
Cela fonctionne, mais le menu de démonstration sur votre page est vraiment minuscule et exigu. Bon exemple, cependant.
David Millar
2
Cela fonctionne si vous utilisez une souris à trois boutons. Ctrl-clic laisse l'utilisateur haut et sec. @Singles a une meilleure suggestion, même si elle laisse un peu à l'imagination.
AJFarkas
7

Je sais que cela a déjà été répondu, mais j'ai passé un certain temps à lutter avec la deuxième réponse pour faire disparaître le menu contextuel natif et le faire apparaître là où l'utilisateur a cliqué.
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";
});

Exemple CodePen

Kristen Nielsen
la source
6

Essaye ça

$(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
la source
Le code est génial, mais veuillez inclure une description de ce qu'est réellement le problème des OP et de la façon dont cela le résout.
Rory McCrossan
J'aime cette solution, mais dans firefox 39, le menu disparaît tout seul après son apparition.
Matt
Cette solution ne fonctionne pas réellement si vous forcez la page à avoir un défilement (disons que vous ajoutez un tas de balises <br>) et que vous vous trouvez quelque part dans la partie inférieure.
DanielM
Vous devez utiliser clientX et clientY au lieu de pageX et pageY pour que cela fonctionne; Découvrez cette excellente réponse: stackoverflow.com/questions/9262741/…
DanielM
Oui, DanielM il y a un problème avec le menu du clic droit lors du défilement, donc cela a été résolu en utilisant clientX et clientY au lieu de pageX et pageY, j'ai apporté des modifications au code. Merci pour l'aide ...
AkshayBandivadekar
5

Solution JS et css pure pour un menu contextuel du clic droit vraiment dynamique, bien que basé sur des conventions de dénomination prédéfinies pour l'identifiant des éléments, les liens, etc. jsfiddle et le code que vous pouvez copier coller dans une seule page html statique:

<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>
Développer l'extrait

Yordan Georgiev
la source
C'est plus la réponse que j'attendais, un exemple modifiant en fait le menu du clic droit
Jesse Reza Khorasanee
yup, un exemple similaire pourrait être: codepen.io/yordangeorgiev/pen/GzWJzd et le produit final: qto.fi/qto/view/concepts_doc (cliquez simplement sur la connexion ...)
Yordan Georgiev
3

Voici un très bon tutoriel sur la façon de construire un menu contextuel personnalisé avec un exemple de code de travail complet (sans JQuery et autres bibliothèques).

Vous pouvez également trouver leur code de démonstration sur GitHub .

Ils donnent une explication détaillée étape par étape que vous pouvez suivre pour créer votre propre menu contextuel clic droit (y compris le code html, css et javascript) et le résumer à la fin en donnant l'exemple de code complet.

Vous pouvez suivre facilement et l'adapter à vos propres besoins. Et il n'est pas nécessaire d'utiliser JQuery ou d'autres bibliothèques.

Voici à quoi ressemble leur exemple de code de menu:

<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 exemple de travail (liste des tâches) peut être trouvé sur codepen .

ForceOfWill
la source
Un bref résumé aiderait les examinateurs (comme moi) à juger de la validité de votre réponse et pourrait empêcher certains lecteurs de suivre ce lien. Juste une phrase ou deux serait bien et pas trop de travail.
Ingo Karkat du
@IngoKarkat Merci pour vos conseils. J'ai ajouté quelques explications. J'espère que ceci vous aidera. Cela m'a beaucoup aidé.
ForceOfWill
2

Vous pouvez le faire avec ce code. visitez ici pour un didacticiel complet avec détection automatique des bords 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
la source
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
la source
2
Vous savez qu'il y a un oncontextmenuévénement qui se déclenche (généralement sur un clic droit)
megawac
1

Une façon simple de le faire est d'utiliser onContextMenu pour renvoyer une fonction JavaScript:

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

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

Et en entrant, return false;vous annulerez le menu contextuel.

si vous souhaitez toujours afficher le menu contextuel, vous pouvez simplement supprimer la return false;ligne.

EpicNinjaCheese
la source
1

Testé et fonctionne dans Opera 12.17, Firefox 30, Internet Explorer 9 et Chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
raphpell
la source
1
Est-ce que cela ne montrerait pas une alerte lorsque le menu contextuel apparaît? Je ne vois pas comment cela le personnaliserait.
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;">

Ce que je fais ici

  1. Créez votre propre menu div personnalisé et définissez la position: absolue et affichage: aucun au cas où.
  2. Ajoutez à la page ou à l'élément à cliquer l'événement oncontextmenu.
  3. Annulez l'action du navigateur par défaut avec return false.

  4. Utilisez js pour invoquer vos propres actions.

Chris Enitan
la source
0

Vous devez vous rappeler si vous souhaitez utiliser la solution Firefox uniquement, si vous souhaitez l'ajouter à l'ensemble du document, vous devez ajouter contextmenu="mymenu"à la <html>balise et non à la bodybalise.
Vous devez faire attention à cela.

WowOWwoW
la source
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>

Vous pouvez ajuster et modifier ce code pour créer un menu contextuel plus beau et plus efficace. Quant à la modification d'un menu contextuel existant, je ne sais pas comment faire cela ... Consultez ce violon pour un point de vue organisé. Essayez également de cliquer sur les éléments de mon menu contextuel. Ils devraient vous alerter sur quelques messages impressionnants. S'ils ne fonctionnent pas, essayez quelque chose de plus ... complexe.

Cannicide
la source
0

J'utilise quelque chose de similaire au jsfiddle suivant

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 vous ciblez des navigateurs IE plus anciens, vous devez de toute façon le compléter avec l'attribut 'attachEvent; Cas

fedeghe
la source