原生实现鼠标右键点击显示菜单

  1. 屏蔽自定义菜单区域的浏览器右键菜单

  2. 获取右键点击区域

  3. 获取菜单点击的区域

  4. 点击其他区域移除菜单 

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>右键点击菜单</title><style>ul{list-style: none;display: flex;}.main-box{position: relative;display: flex;}.menu-box,
      .right-menu{margin: 0;padding: 0;}.menu-box > li{margin: 5px;padding: 5px 20px;background-color: aqua;cursor: pointer;}.right-menu{width: 100px;position: absolute;background-color:var(--color-bg);font-size: 13px;cursor: pointer;color:var(--color-text);z-index: 9999;box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);display: flex;flex-direction: column;}.right-menu > li{padding: 5px 2px;cursor: pointer;}.right-menu > li:hover{color: #3477f2;}</style></head><body><divclass="main-box"><ulclass="menu-box"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div><script>// 取消main-box区域右键浏览器菜单
      document.querySelector(".main-box").oncontextmenu=function(e){returnfalse;};// 监听鼠标点击事件
      document.querySelector(".menu-box").onmousedown=function(e){// 2是鼠标右键if(e.button ===2){
          console.log(e);
          console.log("点击了", e.srcElement.innerHTML);// 创建菜单domcreateRightMenu(e.clientX, e.clientY);}};functioncreateRightMenu(clientX, clientY){let rightMenuDom = document.getElementById("right-menu");const tagDomBox = document.querySelector(".main-box");if(rightMenuDom){//   rightMenuDom.remove();
          tagDomBox.removeChild(rightMenuDom);}
        tagDomBox?.insertAdjacentHTML("beforeend",`<ul id="right-menu" class="right-menu">
                <li>刷新</li>
                <li>关闭</li>
                <li>全部关闭</li>
            </ul>`);
        rightMenuDom = document.getElementById("right-menu");
        rightMenuDom.style.left = clientX +"px";
        rightMenuDom.style.top = clientY +"px";
        console.log(tagDomBox, rightMenuDom);// 监听页面点击事件，其他地方点击移除菜单dom
        window.addEventListener("click", hideMenu);}functionhideMenu(e){let rightMenuDom = document.getElementById("right-menu");
        console.log(e.target.parentNode === rightMenuDom);if(e.target.parentNode === rightMenuDom){// 点击的哪个菜单
          console.log(e.target);}
        rightMenuDom?.remove();}</script></body></html>