<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #div1{ position: absolute; 100px; background: #ccc; border: 1px solid black; display: none; } </style> <script> document.oncontextmenu = function(ev){ var oEvent = ev || event; var oDiv = document.getElementById("div1"); oDiv.style.display = "block"; oDiv.style.left = oEvent.clientX +"px"; oDiv.style.top = oEvent.clientY +"px"; return false;//阻止默认事件 } //点击其他地方的时候消失右键菜单 document.onclick = function(){ var oDiv = document.getElementById("div1"); oDiv.style.display = "none"; } </script> </head> <body> <div id="div1"> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> </div> </body> </html>