首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用jquery/javascript编写自己的右键菜单并禁用默认值

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

Stack Overflow用户
提问于 2009-09-20 02:08:51
回答 2查看 18.4K关注 0票数 18

我使用jquery成功地禁用了页面上的右键单击事件。我想创建一个自定义右击菜单。我该怎么做呢?这是否需要相关的css设置才能运行(即"position")?

EN

回答 2

Stack Overflow用户

发布于 2009-09-20 02:27:24

这个例子是可行的,尽管它很俗气。您可以在上下文菜单处理程序中执行的操作是在屏幕上的特定位置显示带有您选择的项目的DIV。据我所知,在右键单击元素时出现的上下文菜单中没有自定义项目的方法。

代码语言:javascript
复制
<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>
票数 3
EN

Stack Overflow用户

发布于 2012-05-23 06:02:59

还有一个插件:Audero Context Menu。它是免费的,并且使用起来非常简单。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/1450100

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档