自定义鼠标右击菜单要素：
禁止页面默认右击事件
设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）
鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）
效果图
代码如下：
html代码
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <link rel="stylesheet" type="text/css" href="right-click.css" /> </head> <body> <div id="contain-friend">右击显示菜单</div> <label id="label1"></label> <div id="menu-friend"> <div> <button id="btn1">菜单一</button> </div> <div> <button id="btn2">菜单二</button> </div> </div> <script src="right-click.js"></script> </body> </html>
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是考虑加上滚动条的情况（实际上这个例子里面并没有滚动条）。
window.onload = function() { //以下为自定义右击菜单 document.oncontextmenu = function(e) { //阻止执行浏览器默认右击事件 e.preventdefault(); //聊天室好友列表 if (document.getelementbyid("menu-friend")) { var menu1 = document.getelementbyid("menu-friend"); menu1.style.display = "block"; document.getelementbyid("contain-friend").onmousedown = function(e) { //菜单定位 menu1.style.left = e.offsetx + "px"; menu1.style.top = document.documentelement.scrolltop + e.clienty + "px"; //alert(menu1.style.top) if (document.getelementbyid("contain-friend")) { if (e.button == 2) { menu1.style.visibility = "visible"; } else { menu1.style.visibility = "hidden"; } } } } } if (document.getelementbyid("btn1")) { document.getelementbyid("btn1").onmousedown = function(e) { document.getelementbyid("label1").innerhtml = "你点击了菜单一" } } if (document.getelementbyid("btn2")) { document.getelementbyid("btn2").onmousedown = function(e) { document.getelementbyid("label1").innerhtml = "你点击了菜单二" } } return false; //与e.preventdefault();功能相同，但是必须放在最后否则在return后面的内容均不执行 }
javascript文件
css样式表
1/*自定义右击菜单*/
.contain { background-color: #d1cebc; height: 100px; width: 300px; } .menu { width: 150px; background-color: white; visibility: hidden; position: absolute; box-shadow: 0px 0px 10px #d1cebc } .menu-item { background-color: #fff; margin: 0; } .menu-item-btn { width: 146px; margin: 2px; border: 0; text-align: left; padding-left: 60px; padding-top: 5px; padding-bottom: 5px; background-color: #fff; color: #000; } .menu-item-btn:hover { background-color: #d1cebc; }
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
html中关于盒模型的总结
html语义化有那些作用
html中移动端有哪些布局方案
input的文本框怎么做到和img验证码
以上就是js如何实现自定义鼠标右击菜单的详细内容。