我们在网页中很多都有右键菜单的功能，一般点击右键显示的是浏览器默认的菜单选项，那么我们直接如何通过css+js实现html的右键菜单呢？这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码。
实现原理
在HTML中基本上每个对象都有一个oncontextmenu事件，这个事件就是鼠标的右键单击事件（onclick事件是鼠标的左键单击事件），我们可以监听oncontextmenu事件，阻止默认的浏览器右键菜单e.preventDefault();然后显示我们想要显示的菜单信息，当我们单击其中某一项的时候，就执行我们设定的动作，然后将弹出窗口关闭。
办公资源网址导航 https://www.wode007.com
实现代码
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> window.oncontextmenu=function(e){ e.preventDefault();//取消默认的浏览器自带右键 var evt = window.event || arguments[0]; var menu=document.getElementById('menu');//获取右键菜单 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('menu').style.visibility = 'hidden'; //用户触发click事件就可以关闭了，因为绑定在window上，按事件冒泡处理，不会影响菜单的功能 } </script>
这是个简单例子，由于contextmenu事件支持所有 HTML 元素，这意味者你可以给不同的元素，自定义不同的右键菜单，由于contextmenu事件会冒泡传播，子节点上触发的事件，在父节点上也会触发，所以应该调用对应的函数或者设置对应的属性值来阻止事件冒泡。