JavaScript实现右键菜单

1、代码实现

window.onload = function () {
  (function () {
    // 自定义右键菜单内容并插入到body最后一个节点前
    let dom = `
      

          

              

                  
              
              

                  
              
              

                  
              
              

                  
              
          
      
      

          

              
                  
                  蓝猫图床
              
              
                  
                  个人云盘
              
              
                  
                  书籍阅读
              
              
                  
                  接口文档
              
          
      
      `;
    let rightMenuDiv = document.createElement("div");
    rightMenuDiv.id = "rightMenu";
    let body = document.body;
    rightMenuDiv.innerHTML = dom;
    body.insertBefore(rightMenuDiv, body.lastChild);

    // 引入外部css文件
    let link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href =
      "https://static.likepoems.com/cdn/common/botui/releases/v4.7.0/css/font-awesome.min.css";
    document.head.appendChild(link);

    /* 创建style标签并设置菜单样式 */
    let rightMenuStyle = document.createElement("style");
    rightMenuStyle.innerHTML =
      "#rightMenu{display:none;font-size:20px;position:fixed;padding:0 0.25rem;width:9rem;height:fit-content;top:10%;left:10%;background-color: rgb(calc(0 + 255 * 0.92), calc(150 + (255 - 150) * 0.92), calc(136 + (255 - 136) * 0.92));;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform:translateZ(0);color:#32325d;border-radius:12px;z-index:999;border:1px solid #e3e8f7;user-select:none;box-shadow:0 0 12px 4px rgba(0,0,0,0.05);transition:border 0.3s;font-weight:500;}#rightMenu:hover{border:1px solid #009688;box-shadow:0 8px 12px -3px #4259ef23;}#rightMenu .rightMenu-group{padding:0.35rem 0.3rem;transition:0.3s;}#rightMenu .rightMenu-line{border-top:1px dashed #4259ef23;}#rightMenu .rightMenu-group.rightMenu-small{display:flex;justify-content:space-between;}#rightMenu .rightMenu-group .rightMenu-item{border-radius:8px;transition:0.3s;}#rightMenu .rightMenu-line .rightMenu-item{margin:0.25rem 0;padding:0.25rem 0;}#rightMenu .rightMenu-group a{background-color:transparent;color:#32325d;text-decoration:none;transition:all 0.2s ease 0s;overflow-wrap:break-word;-webkit-user-drag:none;}#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{display:flex;}#rightMenu .rightMenu-group .rightMenu-item:hover{cursor: pointer !important;background-color:#009688;color:#fff;box-shadow:0 8px 12px -3px #4259ef23;}#rightMenu .rightMenu-group .rightMenu-item i{display:inline-block;text-align:center;line-height:1.5rem;width:1.5rem;padding:0 0.25rem;font-size:18px;color:#32325d;}#rightMenu .rightMenu-line .rightMenu-item i{margin:0 0.25rem;}#rightMenu .rightMenu-group .rightMenu-item span{line-height:1.5rem;}.rightMenu-small .rightMenu-item{width:30px;height:30px;line-height:30px;display:flex;align-items:center;justify-content:center;}";
    document.getElementsByTagName("head").item(0).appendChild(rightMenuStyle);
  })();

  // 如果菜单已经存在
  let rightMenu = document.getElementById("rightMenu");
  if (rightMenu) {
    // 定义菜单显示与隐藏的方法
    let rm = {};
    rm.showRightMenu = function (e, t = 0, l = 0) {
      let o = rightMenu;
      o.style.cssText = `top: ${t}px; left: ${l}px`;
      e ? (o.style.display = "block") : (o.style.display = "none");
    };
    rm.hideRightMenu = function () {
      rm.showRightMenu(!1);
    };
    let rmWidth = parseInt(rightMenu.style.width);
    let rmHeight = parseInt(rightMenu.style.height);

    // 定义键盘事件（主要用于屏蔽鼠标右键以及禁止打开开发者工具）
    document.onkeydown = () => {
      let e = window.event || arguments[0];
      //屏蔽F12
      if (e.keyCode == 123) {
        return false;
        //屏蔽Ctrl+Shift+I
      } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        return false;
        //屏蔽Shift+F10
      } else if (e.shiftKey && e.keyCode == 121) {
        return false;
      }
    };

    // 鼠标右键按下的事件
    window.oncontextmenu = function (e) {
      // 阻止默认行为
      e.preventDefault();
      e = e || window.event;
      // 当可视宽度 > 768时显示菜单
      if (document.body.clientWidth > 768) {
        let t = e.clientY;
        let l = e.clientX + 10;
        return (
          (rmWidth = rmWidth || 155),
          (rmHeight = rmHeight || 255),
          l + rmWidth > window.innerWidth && (l -= rmWidth + 10),
          t + rmHeight > window.innerHeight &&
            (t -= t + rmHeight - window.innerHeight),
          rm.showRightMenu(!0, t, l),
          !1
        );
      }
    };

    // 鼠标按下事件（点击除去菜单的其它区域）
    document.addEventListener("click", (e) => {
      // 如果当前元素或祖先元素中存在rightMenu，则隐藏
      if (!e.target.closest("#rightMenu")) {
        rightMenu.style.display = "none";
      }
    });

    // 点击菜单操作栏图标的事件
    document.getElementById("rightMenuBars").addEventListener("click", (e) => {
      const inner = e.target?.className;
      switch (inner) {
        case "fa fa-chevron-left":
          // 向后
          history.back();
          break;
        case "fa fa-chevron-right":
          // 向前
          history.forward();
          break;
        case "fa fa-refresh":
          // 刷新
          window.location.reload();
          break;
        case "fa fa-chevron-up":
          // 回到顶部
          // 获取点击时的scrollTop值
          let scrollTop = document.documentElement.scrollTop - 0;
          let t = setInterval(function () {
            // 缓动动画，每次走剩余距离的一半
            scrollTop = scrollTop / 2;
            // 定义临界值
            if (scrollTop <= 5) {
              clearInterval(t);
              scrollTop = 0;
            }
            document.documentElement.scrollTop = scrollTop + 0;
          }, 16.666);
          break;
      }
      rm.hideRightMenu();
    });

    // 点击菜单显示栏文字事件
    document.getElementById("rightMenuLinks").addEventListener("click", (e) => {
      const tag = e.target?.tagName?.toLowerCase();
      const inner = e.target?.innerText;
      if (tag === "a" || tag === "span" || tag === "i") {
        rm.hideRightMenu();
      }
      switch (inner) {
        case "蓝猫图床":
          window.open("https://bluecat.likepoems.com");
          break;
        case "个人云盘":
          window.open("https://pan.likepoems.com");
          break;
        case "接口文档":
          window.open("https://api.likepoems.com/");
          break;
        case "书籍阅读":
          window.open("https://reader.likepoems.com/");
          break;
      }
    });
  }
};

2、效果演示