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

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

261 голосов
/ 05 февраля 2011

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

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

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

Ответы [ 18 ]

231 голосов
/ 05 февраля 2011

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

<html>
<head>
<script type="text/javascript">
    if (document.addEventListener) { // IE >= 9; other browsers
        document.addEventListener('contextmenu', function(e) {
            alert("You've tried to open context menu"); //here you draw your own menu
            e.preventDefault();
        }, false);
    } else { // IE < 9
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");
            window.event.returnValue = false;
        });
    }
</script>
</head>
<body>
Lorem ipsum...
</body>
</html>

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

JSFIDDLE

45 голосов
/ 10 мая 2013

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

HTML : contextmenu.html 

<!doctype html>
<html>
    <head>
        <!-- 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" />
    </head>

    <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>
                    <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>
    </body>
</html>

CSS: contextmenu.css 

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

JS: contextmenu.js - используется из принятого ответа 

$(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;
    }
}
18 голосов
/ 24 мая 2015

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

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%;} для меню, которое расширяется справа налево. Вам нужно было бы добавить поле или что-то еще, хотя

12 голосов
/ 07 июня 2013

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

<body oncontextmenu="return false;">

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

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

, например: 

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

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

10 голосов
/ 06 марта 2012 
<!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 меню правой кнопки мыши

10 голосов
/ 01 марта 2016

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

Давайте начнем с eazy, так как у нас есть js выше на этой странице, мы можем беспокоиться о css и макете. Макет, который мы будем использовать, - это элемент <a> с элементом <img> или значком шрифта (<i class="fa fa-flag"></i>) и <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. Мы используем клиент, поэтому div меню должен быть исправлен. 

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

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

var i = document.getElementById("menu").style;
if (document.addEventListener) {
  document.addEventListener('contextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.clientY;
    menu(posX, posY);
    e.preventDefault();
  }, false);
  document.addEventListener('click', function(e) {
    i.opacity = "0";
    setTimeout(function() {
      i.visibility = "hidden";
    }, 501);
  }, false);
} else {
  document.attachEvent('oncontextmenu', function(e) {
    var posX = e.clientX;
    var posY = e.clientY;
    menu(posX, posY);
    e.preventDefault();
  });
  document.attachEvent('onclick', function(e) {
    i.opacity = "0";
    setTimeout(function() {
      i.visibility = "hidden";
    }, 501);
  });
}

function menu(x, y) {
  i.top = y + "px";
  i.left = x + "px";
  i.visibility = "visible";
  i.opacity = "1";
}
body {
  background: white;
  font-family: sans-serif;
  color: #5e5e5e;
}

#menu {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  background: #fff;
  color: #555;
  font-family: sans-serif;
  font-size: 11px;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  -moz-box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  box-shadow: 2px 2px 2px 0px rgba(143, 144, 145, 1);
  padding: 0px;
  border: 1px solid #C6C6C6;
}

#menu a {
  display: block;
  color: #555;
  text-decoration: none;
  padding: 6px 8px 6px 30px;
  width: 250px;
  position: relative;
}

#menu a img,
#menu a i.fa {
  height: 20px;
  font-size: 17px;
  width: 20px;
  position: absolute;
  left: 5px;
  top: 2px;
}

#menu a span {
  color: #BCB1B3;
  float: right;
}

#menu a:hover {
  color: #fff;
  background: #3879D9;
}

#menu hr {
  border: 1px solid #EBEBEB;
  border-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<h2>CSS3 and JAVASCRIPT custom menu.</h2>
<em>Stephan Stanisic | Lisence free</em>
<p>Right-click anywhere on this page to open the custom menu. Styled like the Google Chrome contextmenu. And yes, you can use <i class="fa fa-flag"></i>font-awesome</p>
<p style="font-size: small">
  <b>Lisence</b>
  <br /> "THE PIZZA-WARE LICENSE" (Revision 42):
  <br /> You can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a Pizza in return.
  <br />
  <a style="font-size:xx-small" href="https://github.com/KLVN/UrbanDictionary_API#license">https://github.com/KLVN/UrbanDictionary_API#license</a>
</p>
<br />
<br />
<small>(The white body background is just because I hate the light blue editor background on the result on jsfiddle)</small>
<div id="menu">
  <a href="#">
    <img src="http://puu.sh/nr60s/42df867bf3.png" /> AdBlock Plus <span>Ctrl + ?!</span>
  </a>
  <a href="#">
    <img src="http://puu.sh/nr5Z6/4360098fc1.png" /> SNTX <span>Ctrl + ?!</span>
  </a>
  <hr />
  <a href="#">
    <i class="fa fa-fort-awesome"></i> Fort Awesome <span>Ctrl + ?!</span>
  </a>
  <a href="#">
    <i class="fa fa-flag"></i> Font Awesome <span>Ctrl + ?!</span>
  </a>
</div>
6 голосов
/ 10 ноября 2016

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

5 голосов
/ 11 июля 2015

Попробуйте 

$(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/

3 голосов
/ 30 января 2019

Чистое решение 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>
3 голосов
/ 04 октября 2016

Вот очень хороший учебник по созданию пользовательского контекстного меню с примером полного рабочего кода (без 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 .

Страница:
...