Wie kann ich einer Webseite ein benutzerdefiniertes Rechtsklickmenü hinzufügen?

Question

Wie kann ich einer Webseite ein benutzerdefiniertes Rechtsklickmenü hinzufügen?

Gefragt el 5 de Februar, 2011: Wann wurde die Frage gestellt
467720 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich möchte meiner Webanwendung ein benutzerdefiniertes Rechtsklickmenü hinzufügen. Ist dies möglich, ohne vorgefertigte Bibliotheken zu verwenden? Wenn ja, wie kann ich ein einfaches benutzerdefiniertes Rechtsklick-Menü anzeigen, das keine JavaScript-Bibliothek eines Drittanbieters verwendet?

Ich strebe etwas an, das dem entspricht, was Google Docs macht. Dort können Benutzer mit der rechten Maustaste klicken und ihr eigenes Menü anzeigen.

HINWEIS: Ich möchte lernen, wie ich mein eigenes Programm erstellen kann, anstatt etwas zu verwenden, das bereits von jemandem erstellt wurde, da diese Bibliotheken von Drittanbietern meistens mit Funktionen überladen sind, während ich nur die Funktionen haben möchte, die ich benötige, also möchte ich, dass es komplett von mir selbst erstellt wird.

Gefragt el 5 de Februar, 2011 von Registered User

Answer 1

5 Antworten

Answer 2

7voto

Kris Nielsen Punkte 71

Ich weiß, dass dies bereits beantwortet wurde, aber ich habe einige Zeit damit verbracht, mit der zweiten Antwort zu ringen, um das native Kontextmenü zum Verschwinden zu bringen und dass sie 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

Beantwortet el 10 de November, 2016 von Kris Nielsen (71 Punkte )

Answer 3

6voto

AkshayBandivadekar Punkte 771

Versuchen Sie 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/

Beantwortet el 11 de Juli, 2015 von AkshayBandivadekar (771 Punkte )

Answer 4

3voto

Anand Roshan Punkte 335

Sie können dies mit diesem Code tun. Besuchen Sie hier für 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();
 });
 });

`

Beantwortet el 20 de Oktober, 2015 von Anand Roshan (335 Punkte )

Answer 5

1voto

Chris Enitan Punkte 39

<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

Erstellen Sie Ihr eigenes benutzerdefiniertes div-Menü und stellen Sie die Position: absolut und display:none im Fall.
Fügen Sie der Seite oder dem anzuklickenden Element das Ereignis oncontextmenu hinzu.
Abbrechen der Standard-Browser-Aktion mit return false.
User js zum Aufrufen Ihrer eigenen Aktionen.

Beantwortet el 26 de Juli, 2017 von Chris Enitan (39 Punkte )

Answer 6

1voto

raphpell Punkte 11

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

Beantwortet el 22 de Juni, 2014 von raphpell (11 Punkte )

Wie kann ich einer Webseite ein benutzerdefiniertes Rechtsklickmenü hinzufügen?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich einer Webseite ein benutzerdefiniertes Rechtsklickmenü hinzufügen?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: