【html+js+css】自定义鼠标右键菜单显示 - 浏览器

关联：vue / react / angular / html / js / css
用的原生写的，在vue框架之类的地方则使用自己看着改改，两三下改好就能使用了，没啥难度的东西！

使用场景：自定义（定制）右键菜单内容，屏蔽浏览器的默认右键菜单。

写另一篇文章的时候，刚好碰到跟这个一起配合的东西，就先写下这个了。。。

      #menus {
        width: 140px;
        padding: 3px 5px;
        background-color: #ffffff;
        display: none;
        /* display: flex; */
        flex-wrap: wrap;
        border: 1px solid #dadce0;
        border-radius: 2px;
        box-shadow: 1px 1px 2px #878787;
        position: fixed;
        user-select: none;
      }
      #menus div {
        display: flex;
        align-items: center;
        margin: 2px 0px;
        cursor: pointer;
        width: 100%;
        min-height: 26px;
        padding: 0px 8px;
        font-size: 14px;
      }
      #menus div:hover {
        background-color: #e8e8e9;
      }

    <div id="menus">
      <div data-id="a">复制(ctrl + c)</div>
      <div data-id="b">黏贴</div>
      <div data-id="c">删除</div>
    </div>

      const menus = document.getElementById("menus");
      menus.addEventListener("click", (e) => {
        e.stopPropagation()
      });
      menus.addEventListener("contextmenu", (e) => { // 菜单要阻止默认事件冒泡
        e.stopPropagation()
        e.preventDefault();
      });
      document.addEventListener("contextmenu", (e) => {
        console.log(e, "全局鼠标右键事件");
        e.preventDefault();
        showMenu(e);
      });
      document.addEventListener("click", hideMenu, false); // 隐藏菜单
      function showMenu(e) {
        menus.style.top = `${e.clientY}px`;
        menus.style.left = `${e.clientX}px`;
        menus.style.display = "flex";
      }
      function hideMenu() {
        menus.style.display = "none";
      }
      const menusChild = document.querySelectorAll("#menus div");
      menusChild.forEach(item => {
        item.onclick = (e)=>{
          console.log(e.target.dataset.id, '元素');
          hideMenu()
        }
      });

---

效果如下 ：