<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
height: 2000px;
width: 2000px;
}
.menu{
width: 100px;
height: 200px;
color: white;
background-color: paleturquoise;
position: absolute;
display: none;
}
</style>
</head>
<body>
<div class="menu">
右键菜单
</div>
<script type="text/javascript">
var menu = document.querySelector(".menu");
document.oncontextmenu = function(){
menu.style.display = "block";
var x = event.clientX;
var y = event.clientY;
// 处理边界情况
// 最大的菜单出现的宽高
var windowW = document.documentElement.clientWidth;
var windowH = document.documentElement.clientHeight;
var maxX = windowW - menu.offsetWidth;
var maxY = windowH - menu.offsetHeight;
if (x >= maxX) {
x -= menu.offsetWidth;
}
if (y >= maxY) {
y -= menu.offsetHeight;
}
// 带有滚动条的右键菜单，为了右键菜单显示在页面可见范围内，要加上滚动条的值
menu.style.left = x + document.body.scrollLeft + "px";
menu.style.top = y + document.body.scrollTop+ "px";
// 阻止默认事件
return false;
}
// 点击除菜单本身以外的地方，让菜单消失
document.onclick = function(){
menu.style.display = "none";
}
menu.onclick = function(){
// 取消事件冒泡,当左键点击menu时，不让向document传递点击事件，让菜单不消失
event.cancelBubble = true;
}
</script>
</body>
</html>
4478
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
