Web前端中实现自定义右键菜单
在原生的桌面应用中，右键菜单是个很常见也很常用的东西，但是在Web应用中，由于浏览器自带了右键菜单，所以我们很少见到应用有自己的右键菜单，但不常见并不代表没有，本文就会介绍一个右键菜单的实现。
重点
实现右键菜单的重点就是对鼠标右键点击事件的拦截，防止他响应浏览器默认事件，右键点击事件是 contextmenu，使用 preventDefault() 方法来阻止事件被浏览器响应之后写入正常的dom操作即可。
实现
<!DOCTYPE html>
<html>
<head>
<title>右键菜单</title>
<style type="text/css">
body {
background: linear-gradient(to bottom right, blue 20%, pink 20%, red);
background-size: 100vw 100vh;
}
#right-menu {
position: absolute;
width: 200px;
height: auto;
display: none;
padding: 2px 0;
box-shadow: 0px 0 5px #aaa;
border-radius: 8px;
background: rgba(255, 255, 255, .75);
backdrop-filter: saturate(180%) blur(20px);
--webkit-backdrop-filter: saturate(180%) blur(20px);
}
.menu-item {
height: 35px;
line-height: 35px;
margin: 4px 0;
padding: 0 10px;
cursor: pointer;
background-color: transparent;
}
.menu-item:hover {
background: rgba(223, 223, 223, 0.55);
}
.menu-item-separator {
border-top: 1px #ccc solid;
height: 1px;
}
</style>
</head>
<body>
<div id="right-menu">
<div class="menu-item">返回</div>
<div class="menu-item">执行</div>
<div class="menu-item">启动</div>
<div class="menu-item">删除</div>
<div class="menu-item">导出</div>
<div class="menu-item">导入</div>
</div>
<script type="text/javascript">
const menu = document.querySelector("#right-menu");
window.addEventListener('contextmenu', (e) => {
e.preventDefault();
menu.style.display = "block";
menu.style.left = e.clientX + "px";
menu.style.top = e.clientY + "px";
});
window.addEventListener('click', (e) => {
menu.style.display = "none";
});
</script>
</body>
</html>