自定义右键菜单的制作

最新推荐文章于 2022-10-12 19:47:16 发布

原创最新推荐文章于 2022-10-12 19:47:16 发布 · 287 阅读

CC 4.0 BY-SA版权

第一步：首先简单布局

菜单布局

<body>
	<div id="menu">
       <div>另存为</div>
       <div>全选</div>
       <div>刷新</div>
       <div>查看页面源代码</div>
       <div>查看元素</div>

  </div>
</body>

样式（先将菜单隐藏）

	<style>
      *{
        margin: 0;
        padding: 0;
        list-style: none;
       }
      #menu div{
      	border:1px solid black;
      	width: 160px;
        height: 40px; 
        line-height: 40px;
      }
      #menu div:hover{
         background: pink;
      }
      #menu{
       	display: none;
       	position: absolute;
       	background: #fff;
      }
      </style>

第二步 (注意写在script标签中)
添加oncontextmenu 事件（当用户在页面中右击鼠标时执行 JavaScript ）

document.function(e){
      var e=e||event;                                       //传入参数e
      var X=e.clientX;                                      //获得鼠标在当前页面X轴的位置
      var Y=e.clientY;                                      //获得鼠标在当前页面Y轴的位置
      menu.style.display="block";                           //点击右键时，将隐藏的菜单显示出来
      menu.style.left=X+"px"                                //菜单显示的位置与鼠标位置一致
      menu.style.top=Y+"px"                         
   	  return false;                                         //将右键默认菜单隐藏 
   }

第三步
添加鼠标单击事件（当鼠标左键单击时，菜单隐藏）

document.function(){
   	menu.style.display="none";
   }

完成