Wie füge ich einer Webseite ein benutzerdefiniertes Kontextmenü hinzu?

291

Ich möchte meiner Webanwendung ein benutzerdefiniertes Kontextmenü hinzufügen. Kann dies ohne Verwendung vorgefertigter Bibliotheken erfolgen? Wenn ja, wie wird ein einfaches benutzerdefiniertes Rechtsklick-Menü angezeigt, das keine JavaScript-Bibliothek eines Drittanbieters verwendet?

Ich strebe so etwas wie Google Text & Tabellen an. Hier können Benutzer mit der rechten Maustaste klicken und den Benutzern ihr eigenes Menü anzeigen.

HINWEIS: Ich möchte lernen, wie ich meine eigenen erstellen kann, anstatt etwas zu verwenden, das bereits von jemandem erstellt wurde, da diese Bibliotheken von Drittanbietern die meiste Zeit mit Funktionen gefüllt sind, während ich nur Funktionen möchte, die ich benötige, damit sie vollständig von Hand erstellt werden mich.

javascript  contextmenu  right-click 
— registrierter Nutzer
quelle
3
gerade gestolpert über: davidwalsh.name/html5-context-menu love HTML5
— TD_Nijboer
2
Dies ist definitiv kein Duplikat. Da für die Frage Antworten ohne Bibliotheken von Drittanbietern erforderlich sind und die andere wahrscheinlich Jquery verwendet (ich wollte einen Kontext wie das Laufwerksmenü von Google in ein Benutzer-Skript schreiben) .
— user2284570
erst heute habe ich zwei weitere gute beispiele dafür gefunden (glaube ich): DEMO 1 // DEMO 2 (diese demo braucht jquery UI ) Ich hoffe, ich kann jedem helfen, bb.
— Drako
2
Ich möchte nur darauf hinweisen, dass das HTML5-Kontextmenü nur in einigen Versionen von Firefox unterstützt wird und soweit ich das beurteilen kann, nichts anderes unterstützt. Chrome ab Version 61 unterstützt dies nicht.
— Dan Willett
2
Für Benutzer, die React verwenden - Das native Menü repliziert alle vorhandenen Funktionen (Kopieren, Öffnen in einem neuen Tab, Suchen auf Google usw.), während es nativ aussieht (wendet je nach Browser unterschiedliche Stile an). Demo
— Samdd

Antworten:

247

Beantwortung Ihrer Frage - verwenden Sie das contextmenuEreignis wie folgt:

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>
Erweitern Sie das Snippet

Sie sollten sich jedoch fragen, ob Sie das Standard-Rechtsklickverhalten wirklich überschreiben möchten - dies hängt von der Anwendung ab, die Sie entwickeln.

JSFIDDLE

— Radek Benkel
quelle
12
Getestet unter Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (alle 4 über addEventListener) und IE 8 (attachEvent).
— Radek Benkel
54
Sie haben gerade erklärt, wie Sie das Kontextmenü deaktivieren. Wie erstelle ich mein eigenes Menü?
— Shashwat
13
@Shashwat Sie kennen den Ort, an dem der Benutzer geklickt hat, und Sie haben kein Originalmenü. Erstellen Sie an dieser Stelle einen Container und zeigen Sie dort Ihr Menü an.
— Radek Benkel
2
Es ist richtig: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Dokument ist ebenfalls ein Element.
— Radek Benkel
4
@shanehoban Wenn Sie in Code schauen, sehen Sie diese Zeile e.preventDefault();. Aus diesem Grund wird das reguläre Menü nicht angezeigt. Was Sie tun können, ist eine bedingte Logik zu erstellen, die prüft, ob die Taste gedrückt wird, während Sie mit der rechten Maustaste klicken und dann NICHT anrufen. Dann erhalten e.preventDefault()Sie ein reguläres Browser-Menü.
— Radek Benkel
54

War sehr nützlich für mich. Für Leute wie mich, die die Zeichnung des Menüs erwarten, habe ich hier den Code eingefügt, mit dem ich das Kontextmenü erstellt habe:

$(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>
Erweitern Sie das Snippet

— Mohamed Iqzas
quelle
7
@Schism Suffixed mouseY(event)und mouseX(event)mit px, damit es wie erwartet funktioniert: http://jsfiddle.net/a6w7n64o/ .
— Zanetu
3
Sie verweisen auf ein Element mit der ID von, testaber es gibt kein Element mit der ID von test. Nur Elemente mit der Klasse von test.
— Der Herzog von Marshall שלום
1
@Adelphia - Alles, was nicht einheimisch und nicht von Ihnen selbst erstellt wurde, ist ein Dritter. jQueryist wirklich nicht so aufgebläht mit zusätzlichen Sachen. Nicht in dem Maße, dass es etwas verlangsamen würde. Es ist sehr nützlich und das gleiche, jQuerydas in dieser Antwort verwendet wird, kann leicht in Standardbefehle konvertiert JavaScriptwerden. Es stimmt möglicherweise nicht zu 100% mit der Anfrage in der ursprünglichen Frage überein, aber es stimmt definitiv zu 95% mit der Anfrage überein.
— Der Herzog von Marshall שלום
6
In Firefox 39 wird das Standardkontextmenü weiterhin über dem benutzerdefinierten Menü angezeigt. Auch das benutzerdefinierte Menü wird sofort nach der Anzeige geschlossen.
— Matt
1
@Matt Ich hatte das gleiche Problem mit Firefox 58. Dieser Beitrag beschreibt eine Lösung, die für mich funktioniert: stackoverflow.com/a/40545465/2922675 Sie deaktivieren die Ereignisweitergabe für Dokumente und registrieren Ihren Kontextmenü-Handler für das Fensterobjekt . Hier ist eine angepasste Geige: jsfiddle.net/jjgkLe3g/1
— Nils-o-mat
27

Eine Kombination aus einigen netten CSS- und einigen nicht standardmäßigen HTML-Tags ohne externe Bibliotheken kann zu einem guten Ergebnis führen (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>

Hinweis: Das Menü-Tag existiert nicht, ich mache es (Sie können alles verwenden)

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

Das JavaScript ist nur für dieses Beispiel, ich persönlich entferne es für dauerhafte Menüs unter 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);

Beachten Sie auch, dass Sie möglicherweise Änderungen menu > menu{left:100%;}an menu > menu{right:100%;}einem Menü vornehmen können, das von rechts nach links erweitert wird. Sie müssten jedoch irgendwo einen Rand oder etwas hinzufügen

— Isaac
quelle
20

Entsprechend den Antworten hier und in anderen Abläufen habe ich eine Version erstellt, die der von Google Chrome mit CSS3-Übergang ähnelt. JS Fiddle

Fangen wir eifrig an, da wir die js oben auf dieser Seite haben, können wir uns um das CSS und das Layout kümmern. Das Layout, das wir verwenden werden, ist ein <a>Element mit einem <img>Element oder einem Schriftarten-Symbol ( <i class="fa fa-flag"></i>) und einem <span>, um die Tastaturkürzel anzuzeigen. Das ist also die Struktur:

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

Wir werden diese in ein Div einfügen und dieses Div mit der rechten Maustaste anzeigen. Gestalten wir sie wie in Google Chrome.

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

Jetzt fügen wir den Code aus der akzeptierten Antwort hinzu und erhalten den X- und Y-Wert des Cursors. Dazu verwenden wir e.clientXund e.clientY. Wir verwenden Client, daher muss das Menü div korrigiert werden.

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

Und das ist alles! Fügen Sie einfach die CSS-Übergänge hinzu, um sie ein- und auszublenden, und fertig!

Code-Snippet anzeigen

— Stephan Stanisic
quelle
Das ersparte mir große Kopfschmerzen! Wenn OP nach einer einfachen Möglichkeit suchte, die gesamte Webseite und nicht nur eine Div zu verwenden, sollte dies als Antwort akzeptiert werden :)
— Woody
12

Sie können versuchen, das Kontextmenü einfach zu blockieren, indem Sie Ihrem Body-Tag Folgendes hinzufügen:

<body oncontextmenu="return false;">

Dadurch wird der gesamte Zugriff auf das Kontextmenü blockiert (nicht nur über die rechte Maustaste, sondern auch über die Tastatur).

PS Sie können dies zu jedem Tag hinzufügen, für das Sie das Kontextmenü deaktivieren möchten

beispielsweise:

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

Deaktiviert das Kontextmenü nur in diesem bestimmten Div

— by0
quelle
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>

Getestet und funktioniert in Opera 11.6, Firefox 9.01, Internet Explorer 9 und Chrome 17. Sie können ein funktionierendes Beispiel im Javascript-Kontextmenü überprüfen

— LabLogic
quelle
Es funktioniert, aber das Demo-Menü auf Ihrer Seite ist wirklich winzig und eng. Gutes Beispiel.
— David Millar
2
Es funktioniert, wenn Sie eine Maus mit drei Tasten verwenden. Durch Klicken bei gedrückter Strg-Taste bleibt der Benutzer hoch und trocken. @Singles hat einen besseren Vorschlag, auch wenn es ein bisschen der Fantasie überlässt.
— AJFarkas
7

Ich weiß, dass dies bereits beantwortet wurde, aber ich habe einige Zeit damit verbracht, mit der zweiten Antwort zu ringen, damit das native Kontextmenü verschwindet und dort angezeigt wird, wo der Benutzer geklickt hat.
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";
});

CodePen-Beispiel

— Kristen Nielsen
quelle
6

Versuche dies

$(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
quelle
Code ist großartig, aber bitte geben Sie eine Beschreibung darüber, was das OP-Problem tatsächlich ist und wie es es löst.
— Rory McCrossan
Ich mag diese Lösung, aber in Firefox 39 wird das Menü sofort nach dem Aufrufen von selbst geschlossen.
— Matt
Diese Lösung funktioniert nicht wirklich, wenn Sie die Seite zwingen, einen Bildlauf durchzuführen (sagen wir, Sie fügen eine Reihe von <br> Tags hinzu) und sich irgendwo im unteren Teil davon befinden.
— DanielM
Sie sollten clientX und clientY anstelle von pageX und pageY verwenden, damit dies funktioniert. Schauen
— DanielM
Ja, DanielM, es gibt ein Problem mit dem Rechtsklick-Menü beim Scrollen, sodass dieses Problem durch die Verwendung von clientX und clientY anstelle von pageX und pageY behoben wurde. Ich habe Änderungen am Code vorgenommen. Vielen Dank für
— Ihre
5

Reine JS- und CSS-Lösung für ein wirklich dynamisches Kontextmenü mit Rechtsklick, wenn auch basierend auf vordefinierten Namenskonventionen für die Element-ID, Links usw. jsfiddle und den Code, den Sie kopieren und in eine einzelne statische HTML-Seite einfügen können:

<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>
Erweitern Sie das Snippet

— Yordan Georgiev
quelle
Dies ist eher die Antwort, die ich erwartet hatte, ein Beispiel, das tatsächlich das Rechtsklick-Menü modifiziert
— Jesse Reza Khorasanee
Ja, ein ähnliches Beispiel könnte sein: codepen.io/yordangeorgiev/pen/GzWJzd und das Endprodukt: qto.fi/qto/view/concepts_doc (klicken Sie einfach auf den Login ...)
— Yordan Georgiev
3

Hier ist ein sehr gutes Tutorial zum Erstellen eines benutzerdefinierten Kontextmenüs mit einem vollständig funktionierenden Codebeispiel (ohne JQuery und andere Bibliotheken).

Sie können ihren Demo-Code auch auf GitHub finden .

Sie enthalten eine detaillierte schrittweise Erklärung, die Sie befolgen können, um Ihr eigenes Kontextmenü mit Rechtsklick (einschließlich HTML-, CSS- und Javascript-Code) zu erstellen und am Ende mit dem vollständigen Beispielcode zusammenzufassen.

Sie können einfach mitmachen und es an Ihre eigenen Bedürfnisse anpassen. JQuery oder andere Bibliotheken sind nicht erforderlich.

So sieht ihr Beispielmenücode aus:

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

Ein Arbeitsbeispiel (Aufgabenliste) finden Sie im Codepen .

— Kraft des Willens
quelle
Eine kurze Zusammenfassung würde Rezensenten (wie mir) helfen, die Gültigkeit Ihrer Antwort zu beurteilen, und könnte einige Leser davon abhalten, diesem Link zu folgen. Nur ein oder zwei Sätze wären in Ordnung und nicht zu viel Arbeit.
— Ingo Karkat
@IngoKarkat Danke für deinen Rat. Ich habe eine Erklärung hinzugefügt. Ich hoffe, Sie finden dies hilfreich. Es hat mir sehr geholfen.
— ForceOfWill
2

Sie können es mit diesem Code tun. Besuchen Sie hier das vollständige Tutorial mit automatischer Kantenerkennung. 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
quelle
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
quelle
2
Sie wissen, dass es ein oncontextmenuEreignis gibt, das ausgelöst wird (normalerweise mit der rechten
— Maustaste
1

Eine einfache Möglichkeit besteht darin, mit onContextMenu eine JavaScript-Funktion zurückzugeben:

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

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

Durch Eingabe geben return false;Sie das Kontextmenü auf.

Wenn Sie das Kontextmenü weiterhin anzeigen möchten, können Sie einfach die return false;Zeile entfernen .

— EpicNinjaCheese
quelle
1

Getestet und funktioniert in Opera 12.17, Firefox 30, Internet Explorer 9 und Chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— Raphpell
quelle
1
Würde das nicht eine Warnung anzeigen, wenn das Kontextmenü angezeigt wird? Ich sehe nicht, wie es es anpassen würde.
— 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;">

Was ich hier oben mache

  1. Erstellen Sie Ihr eigenes benutzerdefiniertes Div-Menü und legen Sie die Position fest: absolut und Anzeige: keine für den Fall.
  2. Fügen Sie der Seite oder dem Element, auf das / das geklickt werden soll, das Ereignis oncontextmenu hinzu.
  3. Brechen Sie die Standardbrowseraktion mit return false ab.

  4. Benutzer js, um Ihre eigenen Aktionen aufzurufen.

— Chris Enitan
quelle
0

Sie sollten sich daran erinnern, dass Sie, wenn Sie nur die Firefox-Lösung verwenden möchten, diese contextmenu="mymenu"dem <html>Tag und nicht dem bodyTag hinzufügen möchten, wenn Sie sie dem gesamten Dokument hinzufügen möchten .
Sie sollten darauf achten.

— WowOWwoW
quelle
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>

Sie können diesen Code optimieren und modifizieren, um ein besser aussehendes und effizienteres Kontextmenü zu erhalten. Was das Ändern eines vorhandenen Kontextmenüs angeht, bin ich mir nicht sicher, wie ich das machen soll ... Schauen Sie sich diese Geige für eine organisierte Sichtweise an. Versuchen Sie auch, auf die Elemente in meinem Kontextmenü zu klicken. Sie sollten Sie ein paar tolle Nachrichten alarmieren. Wenn sie nicht funktionieren, versuchen Sie etwas Komplexeres.

— Cannizid
quelle
0

Ich benutze etwas ähnliches wie die folgende 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);
    });
}

Wenn Sie auf ältere IE-Browser abzielen, sollten Sie diese trotzdem mit dem 'attachEvent' vervollständigen. Fall

— fedeghe
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.