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

Question

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

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

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

Answer 1

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

`

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

document.oncontextmenu =function( evt ){
        alert("OK?");
        return false;
        }

Answer 5

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

Answer 6

<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 может вызывать ваши собственные действия.

Answer 7

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

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

Answer 8

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