JS怎样实现自定义鼠标右击菜单
发布时间：09/01 来源：未知 浏览：
关键词：
自定义鼠标右击菜单要素：
制止页面默许右击事件
设定右击菜单的样式乃至菜单显现的位置（通过捕捉鼠标点击位置来肯定菜单的位置）
鼠标在指定控件（区域）上右击时显示菜单（默许菜单潜藏，点击鼠标右键时显示）
结果图
代码如下：
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怎样实现自定义鼠标右击菜单的具体内容，更多请关注百分百源码网其它相关文章！
