<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
ul {
list-style: none;
padding: 0;
margin: 0;
}
.contextMenu {
display: none;
position: absolute;
top: 0;
left: 0;
padding: 2px;
width: 220px;
border: 1px solid #ddd;
}
.contextMenu li {
position: relative;
padding-left: 10px;
border-bottom: 1px dotted #ddd;
line-height: 2.2;
}
.contextMenu li:hover {
background-color: #efefef;
}
.contextMenu li:last-child {
border: none;
}
.contextMenu li span {
position: absolute;
right: 5px;
top: 0;
color: #999;
}
</style>
</head>
<body>
<div class="contextMenu">
<ul>
<li>複製<span>Ctrl+C</span></li>
<li>粘貼<span>Ctrl+V</span></li>
<li>剪切<span>Ctrl+X</span></li>
<li>刪除<span>Del</span></li>
<li>保存<span>Ctrl+S</span></li>
</ul>
</div>
<script>
/* document.onmousedown = function(e) {
if (e.button === 2) {
console.log("你點擊的是右鍵");
}
}; */
var contextMenu = document.querySelector(".contextMenu");
//右鍵事件 contextmenu
//當觸發右鍵事件 那麼就把菜單顯示出來
document.oncontextmenu = function(e) {
//console.log('你點擊的是右鍵')
e.returnValue = false;
//阻止默認右鍵菜單事件;
contextMenu.style.display = "block";
//讓菜單跟隨光標的位置
contextMenu.style.left = e.clientX + "px";
contextMenu.style.top = e.clientY + "px";
};
//當點擊左鍵時，隱藏菜單
document.onclick = function() {
contextMenu.style.display = "none";
};
</script>
</body>
</html>
案例效果，點擊鼠標右鍵時
