自定义鼠标右击菜单要素：
- 禁止页面默认右击事件
- 设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）
- 鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）
效果图
代码如下：
HTML代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" type="text/css" href="right-click.css" /> 10 </head> 11 12 <body> 13 14 <div class="contain" id="contain-friend">右击显示菜单</div> 15 <label id="label1"></label> 16 <div id="menu-friend" class="menu"> 17 <div class="menu-item"> 18 <button class="menu-item-btn" id="btn1">菜单一</button> 19 </div> 20 <div class="menu-item"> 21 <button class="menu-item-btn" id="btn2">菜单二</button> 22 </div> 23 24 </div> 25 <script src="right-click.js"></script> 26 </body> 27 28 </html>
JS代码
关于菜单的定位主要是在第一个if语句部分，后面为验证按钮效果。
menu1.style.left和menu1.style.top用于对菜单进行定位，由css样式表可知menu1的position属性定位为absolute，style.top定位相对于离它最近的position属性值不为static的父辈元素，此处即为body。
menu的位置需要根据页面布局的具体情况来判断是e.offsetX/Y、e.clientX/Y或是其它，此处加上document.documentElement.scrollTop是考虑加上滚动条的情况（实际上这个例子里面并没有滚动条）。
1 window.onload = function() { 2 //以下为自定义右击菜单 3 document.oncontextmenu = function(e) { 4 //阻止执行浏览器默认右击事件 5 e.preventDefault(); 6 //聊天室好友列表 7 if (document.getElementById("menu-friend")) { 8 var menu1 = document.getElementById("menu-friend"); 9 menu1.style.display = "block"; 10 document.getElementById("contain-friend").onmousedown = function(e) { //菜单定位 11 menu1.style.left = e.offsetX + "px"; 12 menu1.style.top = document.documentElement.scrollTop + e.clientY + "px"; 13 //alert(menu1.style.top) 14 if (document.getElementById("contain-friend")) { 15 if (e.button == 2) { 16 menu1.style.visibility = "visible"; 17 } else { 18 menu1.style.visibility = "hidden"; 19 } 20 } 21 } 22 } 23 } 24 if (document.getElementById("btn1")) { 25 document.getElementById("btn1").onmousedown = function(e) { 26 document.getElementById("label1").innerHTML = "你点击了菜单一" 27 } 28 } 29 if (document.getElementById("btn2")) { 30 document.getElementById("btn2").onmousedown = function(e) { 31 document.getElementById("label1").innerHTML = "你点击了菜单二" 32 } 33 } 34 return false; 35 //与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行 36 }
CSS样式表
1/*自定义右击菜单*/ 2 3 .contain { 4 background-color: #D1CEBC; 5 height: 100px; 6 width: 300px; 7 } 8 9 .menu { 10 width: 150px; 11 background-color: white; 12 visibility: hidden; 13 position: absolute; 14 box-shadow: 0px 0px 10px #D1CEBC 15 } 16 17 .menu-item { 18 background-color: #fff; 19 margin: 0; 20 } 21 22 .menu-item-btn { 23 width: 146px; 24 margin: 2px; 25 border: 0; 26 text-align: left; 27 padding-left: 60px; 28 padding-top: 5px; 29 padding-bottom: 5px; 30 background-color: #fff; 31 color: #000; 32 } 33 34 .menu-item-btn:hover { 35 background-color: #D1CEBC; 36 }