浏览器有他的默认行为，就是不需要编写代码浏览器自动具备的一些功能，比如右击鼠标展示的菜单；
很多时候我们需要自己自定义菜单，自定义菜单的原来其实很简单：
1.阻止浏览器的默认行为
2.将自己写的默认菜单展示出来，菜单的left，top和鼠标一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
height: 100px;
width: 100px;
position: absolute;
background-color: #ccc;
color: #fff;
display: none;
}
ul li{
height: 25px;
}
</style>
</head>
<body>
<ul id="menu">
<li>返回</li>
<li>登录</li>
<li>设置</li>
<li>属性</li>
</ul>
</body>
<script>
//点击鼠标右键
window.oncontextmenu = function(ev){
document.getElementById("menu").style.display = "block";
//event--ie ev--其他浏览器
var oEvent = event||ev;
//documentElement--其他游览器 body--谷歌
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
//菜单的style样式跟随鼠标的位置
document.getElementById("menu").style.top = oEvent.clientY + scrollTop + "px";
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
document.getElementById("menu").style.left = oEvent.clientX + scrollLeft + "px";
//阻止系统默认的右键菜单
return false;
}
//点击页面，自定义菜单消失
window.document.onclick = function(){
document.getElementById("menu").style.display = "";
}
</script>
</html>
网友评论