这篇文章主要讲解了js实现自定义右键菜单的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
原理：
1.屏蔽默认的右键菜单
2.点击右键获取位置，让自定义菜单到点击位置上
3.点击左键，自定义菜单消失
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右键菜单练习</title>
<style>
*{
margin: 0;
/*padding: 0;*/
}
ul{
width: 120px;
height: 150px;
background-color: rgb(204,204,204);
font-size: 22px;
list-style: none;
line-height: 50px;
position: fixed;
display: none;
}
li{
background-color: rgb(238,238,238);
padding-left: 15px;
}
</style>
</head>
<body>
<ul id="ul">
<li>复制</li>
<li>剪切</li>
<li>粘贴</li>
</ul>
<script>
//给document 添加 oncontextmenu 事件 取消默认的右键菜单的行为。
//点击右键的时候，获得点击的位置。
var ul = document.getElementById('ul');
document.oncontextmenu=function(e){
e=e||window.event;
//屏蔽样式
e.preventDefault?e.preventDefault():(e.returnValue=false);
//获取坐标
var x=e.clientX;//视口的位置
var y=e.clientY;
//显示菜单
ul.style.display='block';
ul.style.top=y+'px';
ul.style.left=x+'px';
};
//点击左键 自定义菜单消失
document.onclick=function () {
ul.style.display='none';
};
//给每个li添加 鼠标进入(onmouseover)和鼠标离开(onmouseout)的事件
var lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover=function () {
lis[i].style.backgroundColor='rgb(204,204,204)';
};
lis[i].onmouseout=function () {
lis[i].style.backgroundColor='rgb(238,238,238)';
}
}
</script>
</body>
</html>看完上述内容，是不是对js实现自定义右键菜单的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
