<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#myDiv {
cursor: context-menu;
}
#programMenu {
padding: 0;
width: 155px;
position: absolute;
visibility: hidden;
background: #fff;
color: #006696;
font-size: 12px;
border: 1px solid #cccccc;
border-radius: 5px;
}
#programMenu li {
list-style: none;
list-style-position: outside;
height: 25px;
line-height: 25px;
cursor: pointer;
padding-left: 20px;
}
#programMenu li:not([class="disabled"]):focus,
#programMenu li:not([class="disabled"]):hover,
#programMenu li:not([class="disabled"]):active {
background: #3f9afa;
color: #f7fffc;
}
#programMenu li.disabled {
color: #b7b7b7;
}
</style>
</head>
<body>
<div id="myDiv">dYou’ve been added to the denstiny-code organization!
Here are some quick tips for a first-time organization member.
Use the switch context button in the upper left corner of this page to switch between your personal context (dxdleikai) and organizations you are a member of.
After you switch contexts you’ll see an organization-focused dashboard that lists out organization repositories and activities. </div>
<ul id="programMenu">
<li>复制</li>
<li>粘贴</li>
<li class="disabled">删除</li>
</ul>
<script>
var div = document.getElementById('myDiv');
div.addEventListener('contextmenu', function (e) {
e.preventDefault();
var menu = document.getElementById('programMenu');
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
menu.style.visibility = 'visible';
}, false);
document.addEventListener('click', function (e) {
if (e.which === 1) { // 兼容firefox
document.getElementById('programMenu').style.visibility = 'hidden';
}
}, false);
</script>
</body>
</html>