我们在⽹页中很多都有右键菜单的功能，⼀般点击右键显⽰的是浏览器默认的菜单选项，那么我们直接如何通过css+js实现html的右键菜单呢？这篇⽂章将讲解html⿏标⾃定义右键菜单的实现原理和实现代码。
实现原理
在HTML中基本上每个对象都有⼀个oncontextmenu事件，这个事件就是⿏标的右键单击事件（onclick事件是⿏标的左键单击事件），我们可以监听oncontextmenu事件，阻⽌默认的浏览器右键菜单e.preventDefault()；然后显⽰我们想要显⽰的菜单信息，当我们单击其中某⼀项的时候，就执⾏我们设定的动作，然后将弹出窗⼝关闭。
实现代码
css代码:
<style>
html,body{
width : 100%;height : 100%; margin: 0;padding: 0;
}
#menu{
width : 100px;
padding: 10px;
border : 1px solid #ddd;
visibility : hidden;
position : absolute;
}
</style>
html代码:
<body id="container">
<div id="menu">
<a href="javascript:history.back();">后退</a>
<hr/>
<a href="javascript:history.back();">前进</a>
</div>
</body>
js代码:
<script>
e.preventDefault();//取消默认的浏览器⾃带右键
var evt = window.event || arguments[0];
var ElementById('menu');//获取右键菜单
var container = ElementById('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){
p = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
}else{/*否则，就定位菜单的上坐标为当前⿏标位置*/
p = container.scrollTop + evt.clientY + "px";
}
/*设置菜单可见*/
menu.style.visibility = "visible";
}
}
</script>
这是个简单例⼦，由于contextmenu事件⽀持所有 HTML 元素，这意味者你可以给不同的元素，⾃定义不同的右键菜单，由于contextmenu 事件会冒泡传播，⼦节点上触发的事件，在⽗节点上也会触发，所以应该调⽤对应的函数或者设置对应的属性值来阻⽌事件冒泡。
发布评论