-
需求分析:设计一个自定义菜单,默认是隐藏的。当单击右键的时候,在浏览器中可以打开,进行显示菜单。当点击屏幕任意位置的时候,自定义的右键菜单可以关闭。
-
设计思路:先是获取菜单元素,通过return false 关闭浏览器自带的菜单。获取鼠标的坐标以及获取当前窗口的宽度和高度,通过Math函数的min方法,进行调整宽度和高度。当鼠标再次点击的时候,自定义菜单的样式设置为隐藏。
-
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义右键菜单</title>
<style>
body {
font-size: 16px;
font-family: "KaiTi";
}
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #333;
}
.contextmenu {
width: 200px;
border: 1px solid #999;
box-shadow: 3px 3px 3px #ccc;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;
display: none;
}
.contextmenu li {
height: 40px;
line-height: 40px;
}
.contextmenu li a {
display: block;
padding: 0 30px;
}
.contextmenu li a:hover {
background-color: #ccc;
font-weight: bold;
color: #fff;
}
</style>
</head>
<body>
<div class="contextmenu" id="context">
<ul>
<li><a href="javascript:;">复制</a></li>
<li><a href="javascript:;">粘贴</a> </li>
<li><a href="javascript:;">剪切</a></li>
<li><a href="javascript:;">下载</a></li>
<li><a href="javascript:;">上传</a></li>
</ul>
</div>
</body>
<script>
document.oncontextmenu = function(env){
//env 表示event事件
// 兼容event事件写法
var e = env || window.event;
// 获取菜单,让菜单显示出来
var context = document.getElementById("context");
context.style.display = "block";
// 让菜单随着鼠标的移动而移动
// 获取鼠标的坐标
var x = e.clientX;
var y = e.clientY;
// 获取窗口的宽度和高度
var w = window.innerWidth;
var h = window.innerHeight;
// 调整宽度和高度
context.style.left = Math.min(w-202,x)+"px";
context.style.top = Math.min(h-230,y)+"px";
// return false可以关闭系统默认菜单
return false;
};
// 当鼠标点击后关闭右键菜单
document.onclick = function(){
var contextmenu = document.getElementById("context");
contextmenu.style.display = "none";
};
</script>
</html>