<!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>