原生HTML+JS实现右键自定义菜单

2023/10/16
## 简介现在很多WEB项目都有右键自定义菜单，覆盖浏览器右键功能，用以实现一部分自定义功能。本
月上老狗
@dingdangdog
渲染中...
## 简介

现在很多WEB项目都有右键自定义菜单，覆盖浏览器右键功能，用以实现一部分自定义功能。

本文将展示使用原生`JavaScript`实现一个简单的自定义右键菜单，没有太多文字，主要看代码及注释即可，最后有个简单的总结。

<!-- more -->

## 代码

**提示：可以自己新建个html文件，将下方代码复制填写到该文件中，浏览器打开该文件即可查看代码效果。**

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Right-click menu example</title>
    <style type="text/css">
      /* css */
      #manager-menu {
        display: none;
        position: absolute;
        background-color: #393737;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 5px;
        z-index: 9999; /* make sure it appears on top of other elements */
      }
      .menu {
        text-align: center;
        padding: 0.5rem 1.5rem 0.5rem 1rem;
        cursor: pointer;
        margin: 0.1rem;
        color: #FFF;
        border-radius: 5px;
      }
      .menu:hover{
        background: #939393;
      }

      .click-me {
        text-align: center;
        background-color: #96d296;
        padding: 1rem;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- 要实现右键自定义菜单的元素 -->
    <div class="click-me" id="click-me">右键点我</div>

    <!-- 右键菜单，默认是隐藏的（详情查看上方的css） -->
    <div id="manager-menu">
      <div class="menu" id="menu1">菜单1</div>
      <div class="menu" id="menu2">菜单2</div>
    </div>

    <script type="text/javascript">
      // 获取需要实现右键菜单的元素
      var clickDiv = document.getElementById("click-me");
      // 获取右键菜单元素
      var rightClickMenu = document.getElementById("manager-menu");

      // 给clickDiv设置右键(contextmenu)监听
      clickDiv.addEventListener('contextmenu', function(e) {
        // 禁用默认的右键行为
        e.preventDefault();
        // 保存当前右键点击的元素的id属性，以便后续业务使用
        window.localStorage.setItem("clickId", e.target.id);
        // 使用定位跟随鼠标显示右键菜单元素
        rightClickMenu.style.display = "block";
        rightClickMenu.style.left = e.pageX + "px";
        rightClickMenu.style.top = e.pageY + "px";
      });

      // 给整个dom页面设置点击(左键)事件
      document.addEventListener('click', function() {
        // 隐藏(关闭)右键菜单
        rightClickMenu.style.display = "none";
        // 移除右键时保存的元素id
        window.localStorage.removeItem("clickId");
      });
    
      // 获取右键菜单中的"菜单1"元素
      var menu1 = document.getElementById("menu1");
        // 给菜单1设置点击事件，弹出相关信息
        menu1.addEventListener('click', function() {
        alert('You clicked ：' + window.localStorage.getItem("clickId") + ' and menu1');
      });
    </script>
  </body>
</html>
```

## 总结

要想实现一个优秀的 `Web` 网站自定义右键菜单，有几个关键点：
1. 禁止浏览器默认的右键行为；
2. 控制好自定义菜单的出现和隐藏！
3. 自定义菜单的定位要注意。

根据这几个关键点，可以总结出右键自定义菜单的几个主要部分：
1. 被右键时，会出现自定义菜单的元素（`show`），如示例代码中的 `class="click-me"` div。
2. 被左键时，会隐藏自定义菜单的元素（`hidden`），一般是整个dom元素，如示例中的一样。
3. 自定义菜单的元素（默认隐藏），如示例中的 `id="manager-menu"` div。
4. `show` 元素监听右键，编写菜单出现时的逻辑，尤其注意定位问题、参数传递问题，如示例中的 `// 给clickDiv设置右键(contextmenu)监听` 部分代码。
5. `hidden` 元素监听左键，编写菜单隐藏的逻辑，如示例中的 `// 给整个dom页面设置点击(左键)事件` 部分代码。
6. 自定义菜单的监听事件，一般是左键（点击自定义菜单后会发生什么），如示例中的 `// 获取右键菜单中的"菜单1"元素` 部分代码。

特别注意：要注意这些代码的执行顺序，本文示例中的部分顺序可以打乱，但如果你是通过 `js` 动态添加（`append`）的菜单元素DIV，要特别注意！

## 赞助

如果你觉得本文对你有用，想要给作者一些赞助，可以动动小手点击下方广告给予支持，万分感谢~

您的每次点击都能给予作者更多分享的动力！**请无情点击吧：**

<!-- 文章内嵌广告位 -->
<div class="article-ads"></div>
END
登录后收藏
登录后查看和发表评论
前往登录