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

Question

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

Demandé el 5 de Février, 2011: Quand la question a-t-elle été
75402 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je veux ajouter un menu personnalisé de clic droit à mon application Web. Est-il possible de le faire sans utiliser de bibliothèques préétablies ? Si oui, comment afficher un menu de clic droit personnalisé simple qui n'utilise pas de bibliothèque JavaScript tierce ?

Je vise quelque chose comme ce que fait Google Docs. Il permet aux utilisateurs de faire un clic droit et leur montre leur propre menu.

NOTA: Je veux apprendre à créer mon propre logiciel plutôt que d'utiliser un logiciel déjà créé par quelqu'un d'autre, car la plupart du temps, ces bibliothèques tierces sont bourrées de fonctionnalités, alors que je ne veux que les fonctionnalités dont j'ai besoin, et je veux donc qu'elles soient entièrement créées par moi-même.

Demandé el 5 de Février, 2011 par Registered User

4 votes

Sur lequel je suis tombé par hasard : davidwalsh.name/html5-context-menu aimer le HTML5

Commenté el 11 de Février, 2014 par TD_Nijboer

4 votes

Ce n'est certainement pas un doublon. Comme la question exige des réponses sans bibliothèques tierces, et que l'autre est susceptible d'utiliser Jquery (Je voulais écrire un menu contextuel comme celui de Google's drive dans un userscript) .

Commenté el 4 de Janvier, 2015 par user2284570

1 votes

J'ai trouvé aujourd'hui deux autres bons exemples (je pense) à ce sujet : DEMO 1 // DEMO 2 (cette démo a besoin jquery UI ) J'espère aider tout le monde, bb.

Commenté el 25 de Janvier, 2017 par Drako

Afficher 2 autres commentaires

Answer 1

5 Réponses

Answer 2

287voto

singles Points 4344

Répondre à votre question - utiliser contextmenu 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>

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

JSFIDDLE

Répondu el 5 de Février, 2011 par singles (4344 Points )

1 votes

Est-il compatible avec les différents navigateurs ?

Commenté el 5 de Février, 2011 par Registered User

16 votes

Testé sur Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (les 4 via addEventListener) et IE 8 (attachEvent).

Commenté el 5 de Février, 2011 par singles

88 votes

Vous venez d'expliquer comment désactiver le menu du clic droit. Comment créer notre propre menu ?

Commenté el 16 de Septembre, 2012 par Shashwat

Afficher 7 autres commentaires

Answer 3

70voto

Mohamed Iqzas Points 101

C'était très utile pour moi. Pour le bien des gens comme moi, qui attendent le dessin du menu, je mets ici le code que j'ai utilisé pour faire le menu du 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="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.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>

Répondu el 10 de Mai, 2013 par Mohamed Iqzas (101 Points )

7 votes

@Schism Suffixed mouseY(event) y mouseX(event) con px pour qu'il fonctionne comme prévu : http://jsfiddle.net/a6w7n64o/ .

Commenté el 13 de Mars, 2015 par zanetu

1 votes

@Adelphia - Tout ce qui n'est pas natif et qui n'est pas créé par vous-même est une tierce partie. jQuery n'est pas vraiment gonflé de trucs supplémentaires. Pas au point de ralentir quoi que ce soit. C'est très utile et la même jQuery utilisé dans cette réponse pourrait facilement être converti en standard JavaScript commandes. Cela ne correspond peut-être pas à 100 % à la demande formulée dans la question initiale, mais c'est certainement le cas à 95 %.

Commenté el 8 de Avril, 2015 par The Duke Of Marshall שלם

0 votes

@TheDukeOfMarshall Je ne demandais à personne d'écrire le code à ma place, juste d'expliquer comment le faire. La réponse choisie l'a fait parfaitement.

Commenté el 9 de Avril, 2015 par Adelphia

Afficher 2 autres commentaires

Answer 4

12voto

by0 Points 1903

Vous pouvez essayer de bloquer simplement le menu contextuel en ajoutant le texte suivant à votre balise body :

<body oncontextmenu="return false;">

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

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

par exemple :

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

Désactivera le menu contextuel dans cette division particulière uniquement.

Répondu el 7 de Juin, 2013 par by0 (1903 Points )

Answer 5

11voto

LabLogic Points 99

<!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 fonctionnant dans Opera 11.6, firefox 9.01, Internet Explorer 9 et chrome 17 Vous pouvez consulter un échantillon fonctionnel à l'adresse suivante menu clic droit javascript

Répondu el 6 de Mars, 2012 par LabLogic (99 Points )

0 votes

Cela fonctionne, mais le menu de démonstration sur votre page est vraiment minuscule et exigu. Bon exemple, cependant.

Commenté el 3 de Avril, 2013 par David Millar

2 votes

Cela fonctionne si vous utilisez une souris à trois boutons. Ctrl-clic laisse l'utilisateur en plan. @Singles a une meilleure suggestion, même si elle laisse un peu de place à l'imagination.

Commenté el 10 de Octobre, 2014 par AJFarkas

Answer 6

2voto

Graham Allen Points 21

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

Répondu el 28 de Octobre, 2013 par Graham Allen (21 Points )

3 votes

Tu sais qu'il y a un oncontextmenu événement qui est déclenché (généralement lors d'un clic droit)

Commenté el 28 de Octobre, 2013 par megawac

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: