logo标签列表

如何使用jQuery/JavaScript编写自定义右键菜单并禁用默认菜单

javascriptjqueryright-click
18

我使用jQuery成功地禁用了我正在工作的页面上的右键单击事件。 我想创建一个自定义的右键菜单。 我该如何做？这需要相关的CSS设置才能使其正常工作吗（例如，“position”）？

我建议你不要这样做，除非你给用户提供关闭选项——这很烦人，并且违反了“网络”做事的方式。例如，如果用户想从你的网站保存一张图片，他们将无法轻松地这样做（他们仍然可以这样做，只是需要绕过一些障碍）。 - Chii
7
没问题，因为我是将其用于一个内部网络群组的应用程序。 - kratz
3个回答
11
我可以在上下文菜单插件中添加新功能吗？（除了默认的复制、编辑、粘贴等功能） - kratz
3

这个例子虽然有点俗气，但是它是有效的。在你的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>
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接