Як додати користувацьке меню правою кнопкою миші на веб-сторінку?

291

Я хочу додати користувальницьке меню правої кнопки миші до своєї веб-програми. Чи можна це зробити без використання заздалегідь створених бібліотек? Якщо так, як відобразити просте користувацьке меню правою кнопкою миші, в якому не використовується стороння бібліотека JavaScript?

Я маю на меті щось подібне до того, що робить Google Docs. Це дозволяє користувачам клацнути правою кнопкою миші та показати користувачам їх власне меню.

ПРИМІТКА: Я хочу навчитися робити власне порівняно з використанням чогось, що хтось зробив уже з більшості випадків, ці сторонні бібліотеки роздуті з особливостями, тоді як я хочу лише ті функції, які мені потрібні, тому я хочу, щоб це було повністю зроблено власноруч я.

javascript  contextmenu  right-click 
— Зареєстрований користувач
джерело
3
щойно натрапили на: davidwalsh.name/html5-context-menu love HTML5
— TD_Nijboer
2
Це точно не дублікат. Оскільки на запитання потрібні відповіді без сторонніх бібліотек, а інша, швидше за все, використовує Jquery (я хотів написати контекстний диск Google, як контекстне меню всередині користувача) .
— користувач2284570
просто сьогодні я знайшов ще два хороших приклади (я думаю) щодо цього: DEMO 1 // DEMO 2 (для цього демо потрібен інтерфейс jquery UI ) Я сподіваюся допомогти комусь, bb.
— Драко
2
Просто хочу зазначити, що контекстне меню HTML5 підтримується лише в деяких версіях Firefox, і наскільки я можу сказати, нічого іншого не підтримує. Chrome версії 61 не підтримує його.
— Ден Віллетт
2
Для людей, які використовують React - нативне меню копіює всі існуючі функціональні можливості (копіювати, відкривати в новій вкладці, шукати в Google і т. Д.), Шукаючи рідний (застосовується різні стилі залежно від браузера). demo
— samdd

Відповіді:

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 також є елементом.
— Радек Бенкель
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
Ви посилаєтесь на елемент за ідентифікатором, testале немає елемента за ідентифікатором 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>елементом або чудовим значком шрифту ( <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, щоб зникнути і вийти, і готово!

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

— Стефан Станісич
джерело
Це врятувало мені величезний біль у голові! Якщо ОП шукала простий спосіб користування цілою веб-сторінкою, а не просто дівом, на це слід прийняти відповідь :)
— Вуді
12

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

<body oncontextmenu="return false;">

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

PS ви можете додати це до будь-якого тегу, на якому ви хочете відключити контекстне меню

наприклад:

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

Відключить контекстне меню лише в цьому конкретному розділі

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

— АкшайБандівадекар
джерело
Код чудовий, але будь-ласка, додайте опис про те, що насправді є проблемою ОП, і як це вирішує.
— Рорі Маккросан
Мені подобається це рішення, однак у Firefox 39 меню вимикається самостійно після його появи.
— Метт
Це рішення насправді не працює, якщо ви змушуєте сторінку мати прокрутку (скажімо, ви додаєте купу тегів) і знаходитесь десь у нижній її частині.
— DanielM
Для цього ви повинні використовувати clientX та clientY замість pageX та pageY; подивіться цей відповідь: stackoverflow.com/questions/9262741 / ...
— DanielM
Так, у DanielM є проблема з меню правою кнопкою миші під час прокрутки, тому це подолано, використовуючи clientX та clientY замість pageX та pageY, я змінив код. Дякуємо за допомогу ...
— AkshayBandivadekar
5

Pure JS і CSS рішення для дійсно динамічного контекстного меню правої кнопки миші, хоча і на основі заздалегідь певні угоди про іменах для елементів ід, посилання і т.д. 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>

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

— 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; рядок.

— EpicNinjaCeese
джерело
1

Тестується та працює в Opera 12.17, firefox 30, Internet Explorer 9 та chrome 26.0.1410.64 

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }
— рафпелл
джерело
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>

Ви можете налаштувати та змінити цей код, щоб зробити кращий вигляд і більш ефективним контекстним меню. Щодо зміни існуючого контекстного меню, я не знаю, як це зробити ... Перегляньте цю загадку для організованої точки зору. Також спробуйте клацнути елементи в моєму контекстному меню. Вони повинні попередити вас декількома дивовижними повідомленнями. Якщо вони не спрацюють, спробуйте щось більш ... складне.

— Каніцид
джерело
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
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.