<style>
html,body{
width : 100%;height : 100%; margin: 0;padding: 0;
}
#menu111{
width : 100px;
padding: 10px;
border : 1px solid #ddd;
visibility : hidden;
position : absolute;
background-color: #a0a6ad;
}
</style>
<body id="container">
<div id="menu111">
<a href="javascript:history.back();">后退</a>
<hr/>
<a href="javascript:history.back();">前进</a>
</div>
</body>
<script>
window.oncontextmenu=function(e){
e.preventDefault();
//取消默认的浏览器自带右键
var evt = window.event || arguments[0];
var menu=document.getElementById('menu111');
//获取右键菜单
var container = document.getElementById('container');
//获取区域
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var rightedge =container.clientWidth-evt.clientX;
var bottomedge =container.clientHeight-evt.clientY;
console.log(container.clientHeight);
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if (rightedge < menu.offsetWidth){
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";
}else{
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX + "px";
}
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if(bottomedge < menu.offsetHeight){
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
}else{
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY + "px";
}
/*设置菜单可见*/
menu.style.visibility = "visible";
}
window.onclick=function(e){
//关闭右键菜单
document.getElementById('menu111').style.visibility = 'hidden';
//用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能
}
</script>
