Jak dodać niestandardowe menu prawym przyciskiem myszy do strony internetowej?

291

Chcę dodać niestandardowe menu prawym przyciskiem myszy do mojej aplikacji internetowej. Czy można to zrobić bez korzystania z gotowych bibliotek? Jeśli tak, to jak wyświetlić proste niestandardowe menu po kliknięciu prawym przyciskiem myszy, które nie korzysta z zewnętrznej biblioteki JavaScript?

Dążę do tego, co robi Dokumenty Google. Umożliwia użytkownikom kliknięcie prawym przyciskiem myszy i pokazanie użytkownikom własnego menu.

UWAGA: Chcę się nauczyć, jak tworzyć własne, a nie korzystać z czegoś, co ktoś już wcześniej stworzył, te biblioteki stron trzecich są pełne funkcji, podczas gdy chcę tylko tych funkcji, których potrzebuję, więc chcę, aby były całkowicie ręcznie wykonane przez mnie.

javascript contextmenu right-click zarejestrowany użytkownik
źródło
3
natknąłem się na: davidwalsh.name/html5-context-menu love HTML5
TD_Nijboer
2
To zdecydowanie nie jest duplikat. Ponieważ pytanie wymaga odpowiedzi bez bibliotek stron trzecich, a druga prawdopodobnie używa Jquery (chciałem napisać kontekstowy dysk Google jak menu kontekstowe w skrypcie użytkownika) .
user2284570,
właśnie dzisiaj znalazłem jeszcze dwa dobre przykłady (myślę) na ten temat: DEMO 1 // DEMO 2 (to demo wymaga interfejsu użytkownika jquery ) Mam nadzieję, że pomogę każdemu, bb.
Drako
2
Chcę tylko zaznaczyć, że menu kontekstowe HTML5 jest obsługiwane tylko w niektórych wersjach Firefoksa i o ile wiem, nic innego go nie obsługuje. Chrome od wersji 61 nie obsługuje tego.
Dan Willett
2
Dla osób korzystających z React - menu macierzyste replikuje wszystkie istniejące funkcje (kopiowanie, otwieranie w nowej karcie, wyszukiwanie w google itp.), Podczas gdy wygląda natywnie (stosuje różne style w zależności od przeglądarki). demo
samdd

Odpowiedzi:

247

Odpowiadając na pytanie - użyj contextmenuzdarzenia, takiego jak poniżej:

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>
Rozwiń fragment kodu

Ale powinieneś zadać sobie pytanie, czy naprawdę chcesz zastąpić domyślne zachowanie po kliknięciu prawym przyciskiem myszy - zależy to od aplikacji, którą tworzysz.

JSFIDDLE

Radek Benkel
źródło
12
Testowane na Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (wszystkie 4 przez addEventListener) i IE 8 (attachEvent).
Radek Benkel
54
Właśnie wyjaśniłeś, jak wyłączyć menu kliknięcia prawym przyciskiem myszy. Jak stworzyć własne menu?
Shashwat,
13
@Shashwat Znasz miejsce, w którym użytkownik kliknął i nie masz oryginalnego menu. Utwórz kontener w tym miejscu i wyświetl tam swoje menu.
Radek Benkel,
2
Zgadza się: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Dokument jest również elementem.
Radek Benkel
4
@shanehoban Gdy spojrzysz na kod, zobaczysz ten wiersz e.preventDefault();. Dlatego zwykłe menu nie jest wyświetlane. Co możesz zrobić, to stworzyć logikę warunkową, która sprawdza, czy klawisz zostanie naciśnięty podczas kliknięcia prawym przyciskiem myszy, a następnie NIE woła e.preventDefault()- wtedy pojawi się zwykłe menu przeglądarki.
Radek Benkel
54

Był dla mnie bardzo przydatny. W trosce o ludzi takich jak ja, oczekujących na narysowanie menu, umieściłem tutaj kod, którego użyłem do utworzenia menu prawym przyciskiem myszy:

$(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>
Rozwiń fragment kodu

Mohamed Iqzas
źródło
7
@ Schizm Suffixed mouseY(event)i mouseX(event)with, pxaby działał zgodnie z oczekiwaniami: http://jsfiddle.net/a6w7n64o/ .
zanetu
3
Odwołujesz się do elementu według identyfikatora, testale nie ma elementu o identyfikatorze test. Tylko elementy z klasą test.
The Duke Of Marshall שלום
1
@Adelphia - Wszystko, co nie jest rodzime i nie zostało stworzone przez ciebie, jest stroną trzecią. jQuerynaprawdę nie jest tak napompowane dodatkowymi rzeczami. Nie do tego stopnia, żeby cokolwiek spowolniło. Jest to bardzo przydatne i to samo jQueryużyte w tej odpowiedzi można łatwo przekonwertować na standardowe JavaScriptpolecenia. Może nie być w 100% zgodny z żądaniem z pierwotnego pytania, ale z pewnością jest w 95% zgodny z żądaniem.
The Duke Of Marshall שלום
6
W Firefoksie 39 domyślne menu kontekstowe nadal pojawia się u góry niestandardowego menu. Również menu niestandardowe zostaje natychmiast usunięte po wyświetleniu.
Matt
1
@Matt Miałem ten sam problem z Firefoksem 58. Ten post opisuje rozwiązanie, które działa dla mnie: stackoverflow.com/a/40545465/2922675 Wyłączasz propagację zdarzeń dla dokumentu i rejestrujesz obsługę menu kontekstowego na obiekcie okna . Oto dostosowane skrzypce: jsfiddle.net/jjgkLe3g/1
Nils-o-mat
27

Kombinacja ładnych CSS i niektórych niestandardowych tagów HTML bez zewnętrznych bibliotek może dać niezły wynik (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>

Uwaga: tag menu nie istnieje, tworzę go (możesz użyć wszystkiego)

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

JavaScript jest tylko dla tego przykładu, ja osobiście go usunąć uporczywe menu na okna

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

Należy również pamiętać, można potencjalnie zmodyfikować menu > menu{left:100%;}, aby menu > menu{right:100%;}otworzyć menu rozwijanym po prawej do lewej. Musisz jednak dodać margines lub coś innego

Izaak
źródło
20

Zgodnie z odpowiedziami tutaj i na innych przepływach, stworzyłem wersję, która wygląda jak Google Chrome, z przejściem css3. JS Fiddle

Zacznijmy spokojnie, ponieważ mamy js powyżej na tej stronie, możemy martwić się o css i układ. Układ, którego będziemy używać, to <a>element z <img>niesamowitą ikoną elementu lub czcionki ( <i class="fa fa-flag"></i>) ia, <span>aby pokazać skróty klawiaturowe. Oto struktura:

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

Umieścimy je w div i pokażemy div przy prawym kliknięciu. Zróbmy je tak, jak w Google Chrome, prawda?

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

Teraz dodamy kod z zaakceptowanej odpowiedzi i uzyskamy wartość X i Y kursora. Aby to zrobić, użyjemy e.clientXi e.clientY. Używamy klienta, więc div menu musi zostać naprawiony.

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

I to jest to! Po prostu dodaj przejścia css, aby zanikać i gotowe, i gotowe!

Pokaż fragment kodu

Stephan Stanisic
źródło
To uratowało mnie ogromnym bólem głowy! Jeśli OP szukał prostego sposobu użycia na całej stronie, a nie tylko div, to należy zaakceptować odpowiedź :)
Woody
12

Możesz po prostu zablokować menu kontekstowe, dodając następujące elementy do tagu body:

<body oncontextmenu="return false;">

Spowoduje to zablokowanie dostępu do menu kontekstowego (nie tylko z prawego przycisku myszy, ale również z klawiatury).

PS możesz dodać to do dowolnego tagu, na którym chcesz wyłączyć menu kontekstowe

na przykład:

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

Wyłącza menu kontekstowe tylko w tym konkretnym div

by0
źródło
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>

Przetestowane i działa w Opera 11.6, Firefox 9.01, Internet Explorer 9 i Chrome 17 Możesz sprawdzić działającą próbkę w menu javascript prawym przyciskiem myszy

LabLogic
źródło
Działa, ale menu demo na twojej stronie jest naprawdę małe i ciasne. Dobry przykład.
David Millar,
2
Działa, jeśli używasz myszy z trzema przyciskami. Ctrl-klik pozostawia użytkownika wysoko i sucho. @Singles ma lepszą sugestię, nawet jeśli pozostawia to trochę wyobraźni.
AJFarkas,
7

Wiem, że już na nie odpowiedziano, ale spędziłem trochę czasu zmagając się z drugą odpowiedzią, aby zniknąć natywne menu kontekstowe i pokazać, gdzie kliknął użytkownik.
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";
});

Przykład CodePen

Kristen Nielsen
źródło
6

Spróbuj tego

$(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
źródło
Kod jest świetny, ale proszę podać opis tego, czym tak naprawdę jest problem PO i jak to rozwiązać.
Rory McCrossan,
Podoba mi się to rozwiązanie, jednak w Firefoksie 39 menu samo się porzuca.
Matt
To rozwiązanie w rzeczywistości nie działa, jeśli zmusisz stronę do przewijania (powiedz, że dodajesz kilka tagów <br>) i znajdujesz się gdzieś w jej dolnej części.
DanielM
Aby działało, powinieneś używać clientX i clientY zamiast pageX i pageY; sprawdź tę świetną odpowiedź: stackoverflow.com/questions/9262741/...
DanielM
Tak, DanielM, jest problem z menu kliknięcia prawym przyciskiem podczas przewijania, więc to obejście przez użycie clientX i clientY zamiast pageX i pageY, wprowadziłem zmiany w kodzie. Dzięki za pomoc ...
AkshayBandivadekar
5

Czyste rozwiązanie JS i css dla prawdziwie dynamicznego menu kontekstowego kliknięcia prawym przyciskiem myszy, aczkolwiek oparte na predefiniowanych konwencjach nazewnictwa dla identyfikatora elementów, linków itp. Jsfiddle i kodu, który można skopiować wklej na pojedynczą statyczną stronę HTML:

<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>
Rozwiń fragment kodu

Yordan Georgiev
źródło
Jest to bardziej odpowiedź, której się spodziewałem, przykład faktycznie modyfikujący menu prawego przycisku myszy
Jesse Reza Khorasanee
tak, podobny przykład może być: codepen.io/yordangeorgiev/pen/GzWJzd i produkt końcowy: qto.fi/qto/view/concepts_doc (wystarczy kliknąć login ...)
Yordan Georgiev
3

Oto bardzo dobry samouczek na temat tworzenia niestandardowego menu kontekstowego z pełnym przykładem działającego kodu (bez JQuery i innych bibliotek).

Możesz także znaleźć ich kod demo na GitHub .

Podają szczegółowe wyjaśnienie krok po kroku, które można wykonać, aby zbudować własne menu kontekstowe po kliknięciu prawym przyciskiem myszy (w tym HTML, CSS i kod javascript) i podsumować je na końcu, podając pełny przykładowy kod.

Możesz łatwo śledzić i dostosować go do własnych potrzeb. I nie ma potrzeby korzystania z JQuery ani innych bibliotek.

Tak wygląda ich przykładowy kod 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>

Przykład działania (lista zadań) można znaleźć na codepen .

Siła woli
źródło
Krótkie streszczenie pomogłoby recenzentom (takim jak ja) ocenić wiarygodność Twojej odpowiedzi i może uratować niektórych czytelników przed skorzystaniem z tego linku. Wystarczy jedno zdanie lub dwa i nie będzie to zbyt wiele pracy.
Ingo Karkat
@IngoKarkat Dziękujemy za radę. Dodałem jakieś wyjaśnienie. Mam nadzieję, że uznasz to za pomocne. Bardzo mi pomogło.
ForceOfWill,
2

Możesz to zrobić za pomocą tego kodu. odwiedź tutaj, aby uzyskać pełny samouczek z automatycznym wykrywaniem krawędzi 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
źródło
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
źródło
2
Wiesz, że oncontextmenuwydarzenie jest uruchamiane (zwykle po kliknięciu prawym przyciskiem myszy)
megawac
1

Prostym sposobem na to jest użycie onContextMenu, aby zwrócić funkcję JavaScript:

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

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

A po wejściu return false;anulujesz menu kontekstowe.

jeśli nadal chcesz wyświetlić menu kontekstowe, możesz po prostu usunąć return false;linię.

EpicNinjaCheese
źródło
1

Testowany i działa w Opera 12.17, Firefox 30, Internet Explorer 9 i Chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
raphpell
źródło
1
Czy to jutro nie wyświetli ostrzeżenia, gdy pojawi się menu kontekstowe? Nie wiem, jak by to dostosowało.
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;">

Co ja tu robię

  1. Utwórz własne niestandardowe menu div i ustaw pozycję: bezwzględną i wyświetl: w przypadku braku.
  2. Dodaj do strony lub elementu, aby kliknąć zdarzenie oncontextmenu.
  3. Anuluj domyślną akcję przeglądarki, zwracając wartość false.

  4. Użytkownik js, aby wywołać własne działania.

Chris Enitan
źródło
0

Powinieneś pamiętać, że jeśli chcesz używać rozwiązania Firefox, jeśli chcesz dodać go do całego dokumentu, powinieneś dodać contextmenu="mymenu"go do <html>tagu, a nie do bodytagu.
Powinieneś na to zwrócić uwagę.

WowOWwoW
źródło
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>

Możesz dostosować i zmodyfikować ten kod, aby uzyskać lepiej wyglądające, bardziej wydajne menu kontekstowe. Jeśli chodzi o modyfikację istniejącego menu kontekstowego, nie jestem pewien, jak to zrobić ... Sprawdź to skrzypce, aby uzyskać uporządkowany punkt widzenia. Spróbuj także kliknąć elementy w moim menu kontekstowym. Powinni ostrzec Cię o kilku niesamowitych wiadomościach. Jeśli nie działają, spróbuj czegoś bardziej ... złożonego.

Kanikid
źródło
0

Używam czegoś podobnego do następującego 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);
    });
}

jeśli celujesz w starsze przeglądarki IE, i tak powinieneś je uzupełnić poleceniem „attachEvent; walizka

fedeghe
źródło