Как добавить пользовательское меню правой кнопки мыши на веб-страницу?

291

Я хочу добавить пользовательское меню правой кнопки мыши в свое веб-приложение. Можно ли это сделать без использования каких-либо готовых библиотек? Если да, то как отобразить простое пользовательское меню, вызываемое правой кнопкой мыши, в котором не используется сторонняя библиотека JavaScript?

Я стремлюсь к чему-то вроде того, что делает Google Docs. Это позволяет пользователям щелкать правой кнопкой мыши и показывать пользователям их собственное меню.

ПРИМЕЧАНИЕ. Я хочу узнать, как создать свой собственный продукт по сравнению с тем, что кто-то уже сделал, поскольку большую часть времени эти сторонние библиотеки раздуты с функциями, тогда как мне нужны только те функции, которые мне нужны, поэтому я хочу, чтобы они были полностью сделаны вручную. меня.

javascript contextmenu right-click зарегистрированный пользователь
источник
3
просто наткнулся на: davidwalsh.name/html5-context-menu love HTML5
TD_Nijboer
2
Это определенно не дубликат. Поскольку вопрос требует ответов без сторонних библиотек, а другой, скорее всего, будет использовать Jquery (я хотел написать контекстный диск Google, такой как контекстное меню, внутри пользовательского скрипта) .
user2284570
только сегодня я нашел еще два хороших примера (я думаю) по этому поводу: DEMO 1 // DEMO 2 (это демо нужно для jquery UI ).
Драко
2
Просто хочу отметить, что контекстное меню HTML5 поддерживается только в некоторых версиях Firefox, и, насколько я могу судить, ничто другое не поддерживает его. Chrome версии 61 не поддерживает его.
Дэн Уиллетт
2
Для людей, использующих React - native-menu копирует все существующие функции (копирование, открытие в новой вкладке, поиск в Google и т. Д.), Хотя выглядит нативно (применяет различные стили в зависимости от браузера). Демо
Самдд

Ответы:

247

Отвечая на ваш вопрос - используйте contextmenuсобытие, как показано ниже:

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>
Развернуть фрагмент

Но вы должны спросить себя, действительно ли вы хотите перезаписать поведение по умолчанию при щелчке правой кнопкой мыши - это зависит от приложения, которое вы разрабатываете.

JSFIDDLE

Радек Бенкель
источник
12
Протестировано на Opera 11.01, Firefox 3.6.13, Chrome 9, Safari 5 (все 4 через addEventListener) и IE 8 (attachEvent).
Радек Бенкель
54
Вы только что объяснили, как отключить контекстное меню. Как создать собственное меню ??
Шашват
13
@Shashwat Вы знаете место, где пользователь нажал, и у вас нет оригинального меню. Создайте контейнер в этом месте и отобразите там свое меню.
Радек Бенкель
2
Это правильно: developer.mozilla.org/en-US/docs/DOM/element.addEventListener Document также является элементом.
Радек Бенкель
4
@shanehoban Когда вы посмотрите на код, вы увидите эту строку e.preventDefault();. Вот почему обычное меню не отображается. Что вы можете сделать, это создать некоторую условную логику, которая проверяет, нажата ли клавиша во время щелчка правой кнопкой мыши, а затем НЕ вызывает e.preventDefault()- тогда вы получите обычное меню браузера.
Радек Бенкель
54

Было очень полезно для меня. Ради людей вроде меня, ожидающих рисования меню, я поместил здесь код, который использовал для создания меню правой кнопкой мыши:

$(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>
Развернуть фрагмент

Мохамед Икзас
источник
7
@Schism суффикс mouseY(event)и mouseX(event)с , pxчтобы заставить его работать , как ожидалось: http://jsfiddle.net/a6w7n64o/ .
Занету
3
Вы ссылаетесь на элемент по id, testно нет элемента по id test. Только элементы с классом test.
Герцог Маршалл שלום
1
@Adelphia - Все, что не является родным и не создано вами, является третьей стороной. jQueryна самом деле не все так раздуты от лишних вещей. Не до такой степени, что это что-то замедлит. Это очень полезно, и то же самое, что jQueryиспользуется в этом ответе, может быть легко преобразовано в стандартные JavaScriptкоманды. Возможно, он не на 100% соответствует запросу в исходном вопросе, но определенно соответствует на 95%.
Герцог Маршалл שלום
6
В Firefox 39 контекстное меню по умолчанию все еще отображается поверх пользовательского меню. Также пользовательское меню закрывается сразу после отображения.
Мэтт
1
@ Matt У меня была такая же проблема с Firefox 58. В этом посте описывается решение, которое работает для меня: stackoverflow.com/a/40545465/2922675 Вы отключаете распространение событий для документа и регистрируете обработчик контекстного меню в объекте окна. , Вот настроенная скрипка: jsfiddle.net/jjgkLe3g/1
Nils-o-mat
27

Сочетание некоторых хороших CSS и некоторых нестандартных HTML-тегов без внешних библиотек может дать хороший результат (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>

Примечание: тег меню не существует, я делаю это (вы можете использовать все что угодно)

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 только для этого примера, я лично удалить его настойчивое меню на окнах

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

Также обратите внимание, что вы потенциально можете изменить , menu > menu{left:100%;}чтобы menu > menu{right:100%;}для меню , которое расширяется справа налево. Вам нужно было бы добавить поле или что-то еще, хотя

Исаак
источник
20

Согласно ответам здесь и в других потоках, я сделал версию, похожую на версию Google Chrome, с переходом css3. JS Fiddle

Давайте начнем с лёгкости, так как у нас есть js выше на этой странице, мы можем беспокоиться о css и макете. Макет, который мы будем использовать, представляет собой <a>элемент с <img>элементом или значком шрифта awesome ( <i class="fa fa-flag"></i>) и a <span>для отображения сочетаний клавиш. Итак, это структура:

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

Мы поместим их в div и покажем этот div правой кнопкой мыши. Давайте стилизовать их, как в Google Chrome, не так ли?

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

Теперь мы добавим код из принятого ответа и получим значения X и Y курсора. Для этого мы будем использовать e.clientXи e.clientY. Мы используем клиент, поэтому раздел меню должен быть исправлен.

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

И это все! Просто добавьте переходы CSS, чтобы постепенно исчезать и делать!

Показать фрагмент кода

Стефан Станисич
источник
Это спасло меня от головной боли! Если OP искал простой способ использования всей веб-страницы, а не просто div, это должен быть принят ответ :)
Вуди
12

Вы можете попробовать просто заблокировать контекстное меню, добавив следующее в тег body:

<body oncontextmenu="return false;">

Это заблокирует весь доступ к контекстному меню (не только с правой кнопки мыши, но и с клавиатуры).

PS вы можете добавить это к любому тегу, на котором вы хотите отключить контекстное меню

например:

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

Отключить контекстное меню только в этом конкретном div

by0
источник
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>

Протестировано и работает в Opera 11.6, Firefox 9.01, Internet Explorer 9 и Chrome 17. Вы можете ознакомиться с рабочим примером в javascript меню правой кнопки мыши.

LabLogic
источник
Это работает, но демонстрационное меню на вашей странице очень маленькое и тесное. Хороший пример, хотя.
Дэвид Миллар
2
Это работает, если вы используете мышь с тремя кнопками. Ctrl-клик оставляет пользователя высоким и сухим. У @Singles есть лучшее предложение, даже если оно оставляет немного воображения.
AJFarkas
7

Я знаю, что на этот вопрос уже был дан ответ, но я потратил некоторое время на борьбу со вторым ответом, чтобы скрыть собственное контекстное меню и показать его там, где щелкнул пользователь.
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

Кристен Нильсен
источник
6

Попробуй это

$(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
источник
Код отличный, но, пожалуйста, включите описание того, что на самом деле представляет собой проблема с операционными процессами и как это решается.
Рори МакКроссан
Мне нравится это решение, однако в Firefox 39 меню само закрывается сразу после появления.
Мэтт
Это решение на самом деле не работает, если вы заставляете страницу иметь прокрутку (например, вы добавляете кучу тегов <br>) и находитесь где-то в ее нижней части.
DanielM
Вы должны использовать clientX и clientY вместо pageX и pageY, чтобы это работало;
зацените
Да, у DanielM есть проблема с контекстным меню при прокрутке, поэтому для преодоления этого с помощью clientX и clientY вместо pageX и pageY я внес изменения в код. Спасибо за помощь ...
AkshayBandivadekar
5

Чистое решение JS и CSS для по-настоящему динамического контекстного меню, вызываемого правой кнопкой мыши, хотя и на основе предварительно определенных соглашений об именах для элементов id, ссылок и т. Д. Jsfiddle и кода, который вы можете скопировать, вставить в одну статическую 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>
Развернуть фрагмент

Йордан Георгиев
источник
Это больше ответ, который я ожидал, пример, фактически изменяющий меню правой кнопки мыши
Джесси Реза Хорасани
да, похожий пример может быть: codepen.io/yordangeorgiev/pen/GzWJzd и конечный продукт: qto.fi/qto/view/concepts_doc (просто нажмите на логин ...)
Йордан Георгиев
3

Вот очень хороший урок о том, как создать собственное контекстное меню с полным примером рабочего кода (без JQuery и других библиотек).

Вы также можете найти их демонстрационный код на GitHub .

Они дают подробное пошаговое объяснение, за которым вы можете следовать, чтобы создать собственное контекстное меню, вызываемое правой кнопкой мыши (включая html, css и код javascript), и подвести итог в конце, предоставив полный пример кода.

Вы можете легко следовать и адаптировать его к вашим собственным потребностям. И нет необходимости в JQuery или других библиотеках.

Вот как выглядит их пример меню:

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

Рабочий пример (список задач) можно найти на codepen .

ForceOfWill
источник
Краткое резюме поможет рецензентам (таким как я) оценить правильность вашего ответа и может спасти некоторых читателей от перехода по этой ссылке. Просто предложение или два было бы хорошо и не слишком много работы.
Инго Каркат
@IngoKarkat Спасибо за ваш совет. Я добавил некоторые объяснения. Надеюсь, вы найдете это полезным. Это мне очень помогло.
ForceOfWill
2

Вы можете сделать это с помощью этого кода. Посетите здесь для полного учебника с автоматическим определением края 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();
 });
 });

`

Ананд Рошан
источник
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>
Грэм Аллен
источник
2
Вы знаете, что происходит oncontextmenuсобытие, которое запускается (обычно по правому клику)
megawac
1

Простой способ сделать это - использовать onContextMenu для возврата функции JavaScript:

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

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

И, введя, return false;вы отмените контекстное меню.

если вы все еще хотите отобразить контекстное меню, вы можете просто удалить return false;строку.

EpicNinjaCheese
источник
1

Протестировано и работает в Opera 12.17, Firefox 30, Internet Explorer 9 и Chrome 26.0.1410.64. 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
raphpell
источник
1
Разве это не будет отображать предупреждение при появлении контекстного меню? Я не понимаю, как бы это настроить.
Стивен Остермиллер
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;">

Что я здесь делаю

  1. Создайте свое собственное меню div и установите положение: абсолютное и отображение: нет в случае.
  2. Добавьте на страницу или элемент для нажатия на событие oncontextmenu.
  3. Отмените действие браузера по умолчанию, вернув false.

  4. Пользователь JS, чтобы вызвать ваши собственные действия.

Крис Энитан
источник
0

Вы должны помнить, хотите ли вы использовать только решение Firefox, если вы хотите добавить его ко всему документу, вы должны добавить contextmenu="mymenu"его в <html>тег, а не в bodyтег.
На это стоит обратить внимание.

WowOWwoW
источник
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>

Вы можете настроить и изменить этот код, чтобы сделать его более привлекательным и эффективным контекстным меню. Что касается изменения существующего контекстного меню, я не уверен, как это сделать ... Посмотрите эту скрипку для организованной точки зрения. Также попробуйте щелкнуть пункты в моем контекстном меню. Они должны предупредить вас несколькими удивительными сообщениями. Если они не работают, попробуйте что-нибудь более ... сложное.

Cannicide
источник
0

Я использую что-то похожее на следующий 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);
    });
}

если вы нацелены на более старые браузеры IE, вы должны в любом случае дополнить его 'attachEvent; кейс

fedeghe
источник