Comment ajouter un menu personnalisé de clic droit sur une page web?

je veux ajouter un menu personnalisé de clic droit à mon application web. Peut-on le faire sans utiliser de bibliothèques pré-construites? Si oui, comment afficher un menu personnalisé avec clic droit qui n'utilise pas une bibliothèque JavaScript tierce partie?

je vise quelque chose comme ce que fait Google Docs. Il permet aux utilisateurs de cliquer avec le bouton droit de la souris et d'afficher leur propre menu.

NOTE: Je veux apprendre à faire les miens plutôt qu'à utiliser quelque chose. quelqu'un fait déjà depuis la plupart du temps, ces bibliothèques de tiers sont gonflés avec des traits tandis que je veux seulement des traits que j'ai besoin donc je veux qu'il soit complètement fait à la main par moi.

227
demandé sur Mogsdad 2011-02-05 22:32:09

18 réponses

répondre à votre question - utiliser contextmenu événement, comme ci-dessous: 

<html>
<head>
<script type="text/javascript">
    if (document.addEventListener) { // IE >= 9; other browsers
        document.addEventListener('contextmenu', function(e) {
            alert("You've tried to open context menu"); //here you draw your own menu
            e.preventDefault();
        }, false);
    } else { // IE < 9
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");
            window.event.returnValue = false;
        });
    }
</script>
</head>
<body>
Lorem ipsum...
</body>
</html>

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

JSFIDDLE

217
répondu singles 2016-10-01 11:42:31

était très utile pour moi. Pour le bien des gens comme moi, attendant le dessin du menu, j'ai mis ici le code que j'ai utilisé pour faire le menu droit-Clic:

HTML : contextmenu.html 

<!doctype html>
<html>
    <head>
        <!-- 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" />
    </head>

    <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>
                    <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>
    </body>
</html>

CSS: contextmenu.css 

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

JS: contextmenu.js-utilisé à partir de la réponse acceptée 

$(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;
    }
}
38
répondu Mohamed Iqzas 2015-03-13 03:51:31 
<!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 vérifier un échantillon de travail à javascript Menu du clic droit

10
répondu LabLogic 2012-03-06 02:23:16

vous pouvez essayer de simplement bloquer le menu contextuel en ajoutant ce qui suit à votre balise corporelle: 

<body oncontextmenu="return false;">

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

P.S. vous pouvez ajouter ceci à n'importe quelle étiquette que vous voulez désactiver le menu contextuel sur

par exemple: 

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

va désactiver le menu contextuel dans ce div particulier uniquement

10
répondu by0 2013-06-07 15:27:34

une combinaison de quelques bonnes CSS et quelques étiquettes html non standard avec aucune bibliothèque externe peut donner un beau 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>

Note: l'étiquette 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:"30";
}

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 que vous pouvez éventuellement modifier menu > menu{left:100%;} en menu > menu{right:100%;} pour un menu qui s'étend de droite à gauche. Vous auriez besoin d'ajouter une marge ou quelque chose quelque part bien que

10
répondu Isaac 2015-05-24 01:43:37

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

permet de démarrer eazy, puisque nous avons le js ci-dessus sur cette page, nous pouvons nous soucier de la css et la mise en page. La mise en page que nous allons utiliser est un élément <a> avec un élément <img> ou une icône impressionnante 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 une div et montrer que div sur le clic droit. On va les coiffer 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.clientX et e.clientY . Nous utilisons client, donc le menu div 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! Il suffit d'ajouter les transisions css pour passer et sortir, et c'est fait! 

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.clientY;
    menu(posX, posY);
    e.preventDefault();
  }, false);
  document.addEventListener('click', function(e) {
    i.opacity = "0";
    setTimeout(function() {
      i.visibility = "hidden";
    }, 501);
  }, false);
} else {
  document.attachEvent('oncontextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.clientY;
    menu(posX, posY);
    e.preventDefault();
  });
  document.attachEvent('onclick', function(e) {
    i.opacity = "0";
    setTimeout(function() {
      i.visibility = "hidden";
    }, 501);
  });
}

function menu(x, y) {
  i.top = y + "px";
  i.left = x + "px";
  i.visibility = "visible";
  i.opacity = "1";
}
body {
  background: white;
  font-family: sans-serif;
  color: #5e5e5e;
}

#menu {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background: #fff;
  color: #555;
  font-family: sans-serif;
  font-size: 11px;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  padding: 0px;
  border: 1px solid #C6C6C6;
}

#menu a {
  display: block;
  color: #555;
  text-decoration: none;
  padding: 6px 8px 6px 30px;
  width: 250px;
  position: relative;
}

#menu a img,
#menu a i.fa {
  height: 20px;
  font-size: 17px;
  width: 20px;
  position: absolute;
  left: 5px;
  top: 2px;
}

#menu a span {
  color: #BCB1B3;
  float: right;
}

#menu a:hover {
  color: #fff;
  background: #3879D9;
}

#menu hr {
  border: 1px solid #EBEBEB;
  border-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<h2>CSS3 and JAVASCRIPT custom menu.</h2>
<em>Stephan Stanisic | Lisence free</em>
<p>Right-click anywhere on this page to open the custom menu. Styled like the Google Chrome contextmenu. And yes, you can use <i class="fa fa-flag"></i>font-awesome</p>
<p style="font-size: small">
  <b>Lisence</b>
  <br /> "THE PIZZA-WARE LICENSE" (Revision 42):
  <br /> You can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a Pizza in return.
  <br />
  <a style="font-size:xx-small" href="https://github.com/KLVN/UrbanDictionary_API#license">https://github.com/KLVN/UrbanDictionary_API#license</a>
</p>
<br />
<br />
<small>(The white body background is just because I hate the light blue editor background on the result on jsfiddle)</small>
<div id="menu">
  <a href="#">
    <img src="http://puu.sh/nr60s/42df867bf3.png" /> AdBlock Plus <span>Ctrl + ?!</span>
  </a>
  <a href="#">
    <img src="http://puu.sh/nr5Z6/4360098fc1.png" /> SNTX <span>Ctrl + ?!</span>
  </a>
  <hr />
  <a href="#">
    <i class="fa fa-fort-awesome"></i> Fort Awesome <span>Ctrl + ?!</span>
  </a>
  <a href="#">
    <i class="fa fa-flag"></i> Font Awesome <span>Ctrl + ?!</span>
  </a>
</div>
9
répondu Stephan Stanisic 2016-03-01 18:26:33

Essayez Cette 

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

5
répondu AkshayBandivadekar 2015-08-07 07:20:25

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 obtenir le menu de contexte natif de disparaître et l'ont fait apparaître 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 De Code

5
répondu Kristen Nielsen 2016-11-10 19:32:37

Vous pouvez le faire avec ce code. visitez ici pour le tutoriel complet avec la détection automatique de bord 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();
 });
 });

`

2
répondu Anand Roshan 2015-10-20 15:44:25

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émo sur GitHub .

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

vous pouvez le suivre facilement et l'adapter à vos propres besoins. Et il n'y a pas besoin de 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 pratique (liste des tâches) peut être trouvé sur le codepen .

2
répondu ForceOfWill 2016-10-04 08:07:01 
<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>
1
répondu Graham Allen 2013-10-29 05:35:19

un moyen simple que vous pourriez faire, il est d'utiliser onContextMenu pour retourner 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 voulez toujours afficher le menu contextuel, vous pouvez simplement supprimer la ligne return false; .

1
répondu EpicNinjaCheese 2014-02-12 23:45:08

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;
        }
1
répondu raphpell 2014-06-22 10:17:43

vous devriez Vous rappeler si vous voulez utiliser Firefox seule solution, si vous voulez l'ajouter à l'ensemble du document, vous devez ajouter contextmenu="mymenu" à la <html> tag pas à la body tag.

Vous devez faire attention à cela.

0
répondu WowOWwoW 2014-10-10 17:50:17

dans le nouveau html 5.1, il y a un nouveau menu contextuel.

Exemple Ici 

IMPORTANT: ATM, This feature works only in Firefox 49 and later.
0
répondu Asaf Hananel 2016-12-05 15:40:12 
<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 modifier et modifier ce code pour rendre un contexte plus attrayant, plus efficace. Quant à modifier un contextmenu existant, Je ne suis pas sûr de savoir comment le faire... Consultez ce violon pour un point de vue organisé. Aussi, essayez de cliquer sur les éléments dans mon contextmenu. Ils devraient vous alerter de quelques messages géniaux. S'ils ne fonctionnent pas, essayez autre chose... complexe.

0
répondu IamGuest 2017-02-23 08:26:49 
<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: absolute et display:none in case.
  2. ajouter à la page ou à l'élément à cliquer l'événement oncontextmenu.
  3. annuler l'action par défaut du navigateur avec return false.

  4. Utilisateur js pour appeler vos propres actions.

0
répondu Chris Enitan 2017-07-26 12:08:10

j'utilise quelque chose similaire à ce qui suit 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 vous ciblez les navigateurs plus anciens de IE, vous devriez quand même le remplir avec le 'attachEvent; case

0
répondu fedeghe 2018-07-04 19:26:59