-
利用监听window对象的oncontextmenu事件来实现自定义的菜单
-
首先将菜单隐藏起来,当捕获到右键事件时,将菜单移动到合适位置再显示出来
-
当鼠标移出菜单区域或左键点击菜单时再隐藏菜单
-
看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义右键菜单</title>
<style>
body{ background-color: pink;}
/*菜单样式*/
#menu{
width:100px;z-index:100;position: absolute;right: 410px;top:53px;
display: none;}
#menu a{
color: black;
display: inline-block;
background-color: #fff;
width: 100px;
height: 35px;
text-align: center;
line-height: 35px;
border: 1px black;
}
#menu a:hover{ background-color: #38aae1; }
</style>
</head>
<body>
<!-- 菜单 -->
<div id="menu" >
<a id="asg">编辑</a>
<a id="agg">删除</a>
<a id="aby">上移</a>
<a id="aby">下移</a>
</div>
<script>
//点击鼠标右键响应函数
window.oncontextmenu = function(e){
//对右键菜单进行定位
if(e.clientX+100<=innerWidth){
var x = e.clientX;
}
else{
var x = e.clientX - 98;
}
if(e.clientY+140<=innerHeight){
var y = e.clientY;
}
else{
var y = e.clientY - 138;
}
document.getElementById('menu').style.left=x+'px';
document.getElementById('menu').style.top=y+'px';
document.getElementById('menu').style.display='block';
//取消默认的浏览器自带右键
e.preventDefault();
}
//隐藏菜单函数
document.getElementById('menu').onclick = function(){
document.getElementById('menu').style.display='none';
}
document.getElementById('menu').onmouseleave = function(){
document.getElementById('menu').style.display='none';
}
</script>
</body>
</html>