如何使用 jquery/javascript 编写自己的右键菜单并禁用默认菜单

StackOverflow https://stackoverflow.com/questions/1450100

  •  11-09-2019
  •  | 
  •  

题

我成功地禁用了我正在使用 jquery 处理的页面上的右键单击事件。我想创建一个自定义右键菜单。我怎样才能做到这一点？这是否需要相关的 css 设置才能使其正常工作（即“位置”）？

有帮助吗？

解决方案

有各种 jQuery 上下文菜单插件可供使用：

其他提示

这个例子的工作原理，虽然它是俗气。什么，你可以在你的ContextMenu处理程序做的是与你所选择的项目在屏幕上的特定位置显示一个DIV。据我所知，有没有办法可以自定义显示的上下文菜单中的项目，当你在元素上单击右键。

<html>
  <head>
    <title>Context menu test</title>  
    <style type="text/css">
      .element {
        background-color: blue;
        height: 300px;
        width: 300px;
      }

      .popup {
        background-color: red;
        border: 1px solid black;
        width: 100px;
        height: 100px;
        position: absolute;
       }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(function() {
          $(".element").contextmenu
          (
            function(e) {
              $("div.popup").remove();
              $("<div class='popup'>Hi</div>").appendTo("body")
                .css("left", e.pageX)
                .css("top", e.pageY)
                .show();
              e.preventDefault();  // return false; also works
            }
          );
        }
      );

      $.fn.contextmenu = function(func) {
        return this.bind("contextmenu", func);
      }
    </script>
  </head>
  <body>
    <div class="element"></div>
  </body>
</html>

有是这个插件太： Audero上下文菜单。它是免费的，非常简单的使用。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top