Come aggiungere un menu di scelta rapida personalizzato a una pagina Web?

291

Voglio aggiungere un menu di scelta rapida personalizzato alla mia applicazione web. È possibile farlo senza utilizzare librerie predefinite? In tal caso, come visualizzare un semplice menu di scelta rapida personalizzato che non utilizza una libreria JavaScript di terze parti?

Sto mirando a qualcosa di simile a quello che fa Google Docs. Consente agli utenti di fare clic con il pulsante destro del mouse e di mostrare agli utenti il ​​proprio menu.

NOTA: Voglio imparare a creare il mio rispetto a qualcosa che qualcuno ha già fatto dalla maggior parte del tempo, quelle librerie di terze parti sono gonfie di funzionalità mentre voglio solo funzionalità di cui ho bisogno, quindi voglio che siano completamente fatte a mano da me.

javascript  contextmenu  right-click 
— utente registrato
fonte
3
mi sono appena imbattuto in: davidwalsh.name/html5-context-menu love HTML5
— TD_Nijboer
2
Questo non è sicuramente un duplicato. Poiché la domanda richiede risposte senza librerie di terze parti, è probabile che l'altro utilizzi Jquery (volevo scrivere un contesto nel drive di Google come un menu contestuale all'interno di uno script utente) .
— user2284570,
proprio oggi ho trovato altri due buoni esempi (penso) su questo: DEMO 1 // DEMO 2 (questa demo ha bisogno dell'interfaccia utente jquery ) Spero che sia d'aiuto a chiunque, bb.
— Drako,
2
Voglio solo sottolineare che il menu di scelta rapida HTML5 è supportato solo in alcune versioni di Firefox e per quanto ne so nient'altro lo supporta. Chrome a partire dalla versione 61 non lo supporta.
— Dan Willett,
2
Per le persone che usano React - menu nativo replica tutte le funzionalità esistenti (copia, apri in una nuova scheda, ricerca su google ecc.) Mentre appare nativo (applica stili diversi a seconda del browser). demo
— samdd

Risposte:

247

Rispondi alla tua domanda: usa l' contextmenuevento, come di seguito:

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

Ma dovresti chiederti, vuoi davvero sovrascrivere il comportamento predefinito del tasto destro del mouse - dipende dall'applicazione che stai sviluppando.

JSFIDDLE

— Radek Benkel
fonte
12
Testato su Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (tutti e 4 tramite addEventListener) e IE 8 (attachEvent).
— Radek Benkel,
54
Hai appena spiegato come disabilitare il menu di scelta rapida. Come creare il nostro menu ??
— Shashwat,
13
@Shashwat Conosci il luogo in cui l'utente ha fatto clic e non hai un menu originale. Crea un contenitore in quel posto e visualizza il tuo menu lì.
— Radek Benkel,
2
— Radek Benkel,
4
@shanehoban Quando guardi il codice, vedrai questa riga e.preventDefault();. Questo è il motivo per cui il menu normale non viene visualizzato. Quello che puoi fare è creare una logica condizionale che controlli, se si preme il tasto mentre si fa clic con il tasto destro e poi NON si chiama e.preventDefault()- si otterrà quindi un normale menu del browser.
— Radek Benkel,
54

Mi è stato molto utile. Per il bene di persone come me, in attesa del disegno del menu, ho messo qui il codice che ho usato per creare il menu contestuale:

$(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>
Espandi frammento

— Mohamed Iqzas
fonte
7
@Schism Suffisso mouseY(event)e mouseX(event)con pxper farlo funzionare come previsto: http://jsfiddle.net/a6w7n64o/ .
— zanetu,
3
Stai facendo riferimento a un elemento con l'id di testma non vi è alcun elemento con l'id di test. Solo elementi con la classe di test.
— The Duke Of Marshall
1
@Adelphia - Tutto ciò che non è nativo e non creato da te stesso è di terze parti. jQuerydavvero non è tutto così gonfio di cose extra. Non nella misura in cui rallenterebbe qualcosa. È molto utile e lo stesso jQueryusato in questa risposta potrebbe essere facilmente convertito in JavaScriptcomandi standard . Potrebbe non essere in linea al 100% con la richiesta nella domanda originale, ma è sicuramente in linea con il 95%.
— Il duca di Marshall l'
6
In Firefox 39 il menu di scelta rapida predefinito appare ancora nella parte superiore del menu personalizzato. Anche il menu personalizzato si chiude immediatamente dopo la visualizzazione.
— Matt,
1
@Matt Ho avuto lo stesso problema con Firefox 58. Questo post descrive una soluzione che funziona per me: stackoverflow.com/a/40545465/2922675 Disabiliti la propagazione degli eventi per il documento e registri il gestore del menu di scelta rapida sull'oggetto finestra . Ecco un violino modificato: jsfiddle.net/jjgkLe3g/1
— Nils-o-mat
27

Una combinazione di alcuni simpatici CSS e alcuni tag html non standard senza librerie esterne può dare un buon risultato (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>

Nota: il tag menu non esiste, lo sto inventando (puoi usare qualsiasi cosa)

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

Il JavaScript è solo per questo esempio, rimuovere personalmente per i menu persistenti sulle finestre

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

Inoltre nota, è potenzialmente in grado di modificare menu > menu{left:100%;}a menu > menu{right:100%;}un menu che si espande da destra verso sinistra. Dovresti aggiungere un margine o qualcosa da qualche parte però

— Isaac
fonte
20

Secondo le risposte qui e su altri flussi, ho realizzato una versione simile a quella di Google Chrome, con transizione css3. JS Fiddle

Cominciamo con entusiasmo, dato che abbiamo i js sopra in questa pagina, possiamo preoccuparci del CSS e del layout. Il layout che useremo è un <a>elemento con un <img>elemento o un'icona impressionante di carattere ( <i class="fa fa-flag"></i>) e a <span>per mostrare le scorciatoie da tastiera. Quindi questa è la struttura:

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

Li inseriremo in un div e mostreremo quel div con il tasto destro del mouse. Modelliamoli come in Google Chrome, vero?

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

Ora aggiungeremo il codice dalla risposta accettata e otterremo i valori X e Y del cursore. Per fare questo, useremo e.clientXe e.clientY. Stiamo usando client, quindi il div menu deve essere corretto.

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

E questo è tutto! Basta aggiungere le transizioni CSS per sfumare dentro e fuori, e fatto!

Mostra snippet di codice

— Stephan Stanisic
fonte
Questo mi ha fatto risparmiare un enorme mal di testa! Se OP stava cercando un modo semplice da utilizzare su tutta la pagina web e non solo su un div, questa dovrebbe essere una risposta accettata :)
— Woody
12

Puoi provare semplicemente a bloccare il menu di scelta rapida aggiungendo quanto segue al tag body:

<body oncontextmenu="return false;">

Ciò bloccherà tutti gli accessi al menu di scelta rapida (non solo dal pulsante destro del mouse ma anche dalla tastiera).

PS puoi aggiungerlo a qualsiasi tag su cui desideri disabilitare il menu di scelta rapida

per esempio:

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

Disabiliterà il menu di scelta rapida solo in quel particolare div

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

Testato e funziona in Opera 11.6, Firefox 9.01, Internet Explorer 9 e Chrome 17 Puoi controllare un esempio funzionante nel menu di scelta rapida di javascript

— LabLogic
fonte
Funziona, ma il menu demo sulla tua pagina è davvero minuscolo e angusto. Un buon esempio, però.
— David Millar,
2
Funziona se stai usando un mouse a tre pulsanti. Ctrl-clic lascia l'utente alto e asciutto. @Singles ha un suggerimento migliore, anche se lascia un po 'all'immaginazione.
— AJFarkas,
7

So che è già stata data una risposta, ma ho passato un po 'di tempo a lottare con la seconda risposta per far scomparire il menu contestuale nativo e mostrarlo dove l'utente ha fatto clic.
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";
});

Esempio di CodePen

— Kristen Nielsen
fonte
6

Prova questo

$(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
fonte
Il codice è ottimo, ma per favore includi una descrizione di ciò che è effettivamente il problema dei PO e di come risolverlo.
— Rory McCrossan,
Mi piace questa soluzione, tuttavia in Firefox 39 il menu si chiude da solo subito dopo la sua comparsa.
— Matt,
Questa soluzione in realtà non funziona se imponi alla pagina di avere uno scorrimento (supponi di aggiungere un mucchio di tag <br>) e ti trovi da qualche parte nella parte inferiore di esso.
— DanielM,
Dovresti usare clientX e clientY invece di pageX e pageY perché questo funzioni; controllare questa grande risposta: stackoverflow.com/questions/9262741/...
— DanielM
Sì, DanielM c'è un problema con il menu del tasto destro durante lo scorrimento, quindi questo è stato superato usando clientX e clientY invece di pageX e pageY, ho apportato modifiche al codice. Grazie per l'aiuto ...
— AkshayBandivadekar il
5

Pura soluzione JS e css per un menu contestuale di scelta rapida veramente dinamico, sebbene basato su convenzioni di denominazione predefinite per l'id elementi, i collegamenti ecc. Jsfiddle e il codice che è possibile copiare incollare in una singola pagina html statica:

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

— Yordan Georgiev
fonte
Questa è più la risposta che mi aspettavo, un esempio che modifica il menu di scelta rapida
— Jesse Reza Khorasanee,
Sì, un esempio simile potrebbe essere: codepen.io/yordangeorgiev/pen/GzWJzd e il prodotto finale: qto.fi/qto/view/concepts_doc (basta fare clic sul login ...)
— Yordan Georgiev
3

Ecco un ottimo tutorial su come creare un menu di scelta rapida personalizzato di con un esempio di codice di lavoro completo (senza JQuery e altre librerie).

Puoi anche trovare il loro codice demo su GitHub .

Forniscono una spiegazione dettagliata dettagliata che è possibile seguire per creare il proprio menu contestuale del tasto destro (compresi codice html, css e javascript) e riassumerlo alla fine fornendo il codice di esempio completo.

Puoi seguirlo facilmente e adattarlo alle tue esigenze. E non è necessario per JQuery o altre librerie.

Ecco come appare il loro codice di menu di esempio:

<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 esempio funzionante (elenco attività) è disponibile su codepen .

— ForceOfWill
fonte
Un breve riassunto aiuterebbe i revisori (come me) a giudicare la validità della tua risposta e potrebbe salvare alcuni lettori dal seguire quel link. Solo una frase o due andrebbero bene e non troppo lavoro.
— Ingo Karkat,
@IngoKarkat Grazie per il tuo consiglio. Ho aggiunto qualche spiegazione. Spero che ti sia d'aiuto. Mi ha aiutato molto.
— ForceOfWill
2

Puoi farlo con questo codice. visita qui per il tutorial completo con rilevamento automatico dei bordi 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
fonte
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
fonte
2
Sai che c'è un oncontextmenuevento che viene sparato (di solito con il tasto destro)
— megawac,
1

Un modo semplice per farlo è usare onContextMenu per restituire una funzione JavaScript:

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

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

E entrando return false; cancellerai il menu contestuale.

se vuoi ancora visualizzare il menu contestuale puoi semplicemente rimuovere la return false;linea.

— EpicNinjaCheese
fonte
1

Testato e funziona in Opera 12.17, Firefox 30, Internet Explorer 9 e Chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— raphpell
fonte
1
Quel jut non mostrerebbe un avviso quando appare il menu contestuale? Non vedo come lo personalizzerebbe.
— 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;">

Quello che sto facendo qui

  1. Crea il tuo div menu personalizzato e imposta la posizione: assoluta e display: nessuna nel caso.
  2. Aggiungi alla pagina o elemento per fare clic sull'evento oncontextmenu.
  3. Annulla l'azione predefinita del browser con return false.

  4. Utente js per invocare le tue azioni.

— Chris Enitan
fonte
0

Si dovrebbe ricordare se si desidera utilizzare l'unica soluzione di Firefox, se si desidera aggiungerlo all'intero documento, è necessario aggiungere contextmenu="mymenu"al <html>tag e non al bodytag.
Dovresti prestare attenzione a questo.

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

È possibile modificare e modificare questo codice per creare un menu contestuale più bello ed efficiente. Per quanto riguarda la modifica di un menu di scelta rapida esistente, non sono sicuro di come farlo ... Dai un'occhiata a questo violino per un punto di vista organizzato. Inoltre, prova a fare clic sugli elementi nel mio menu contestuale. Dovrebbero avvisarti di alcuni fantastici messaggi. Se non funzionano, prova qualcosa di più ... complesso.

— Cannicide
fonte
0

Uso qualcosa di simile al seguente 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);
    });
}

se scegli come target browser IE precedenti, dovresti comunque completarlo con "attachEvent; Astuccio

— fedeghe
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.