js自定義右鍵選單，點選自定義選單隱藏、顯示指定div
阿新 • • 發佈：2018-12-21
首先寫好自己想要的右鍵選單的樣子，然後設定該選單div為預設隱藏，滑鼠右擊後設置css顯示該選單(display:block;)，並禁用瀏覽器右鍵預設選單。
接下來就可以寫選單中具體項的點選事件實現隱藏和顯示指定div了。
完整程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style> #myMenu {width: 80px;background: white;display: none;position: absolute;border:1px solid #EED5D2;z-index:999} #myMenu ul{list-style: none;} #myMenu ul li{width:50px;height:20px;background:#FFE4B5;margin-bottom:5px;text-align:center;margin-left:-25px} #myDiv{border:1px solid red;width:100px;height:100px;display:block;margin:200px auto; } </style> <script> //滑鼠右鍵預設選單事件 document.oncontextmenu = function(ev) { var oevent = ev || event; var myMenu = document.getElementById('myMenu'); //彈出自定義選單 myMenu.style.display = 'block'; //設定自定義選單的座標，達到滑鼠右鍵的地方彈出自定義選單 myMenu.style.left = oevent.clientX + 'px'; myMenu.style.top = oevent.clientY + 'px'; //禁用右鍵預設選單 return false; } //點選頁面任意區域，隱藏自定義選單 document.onclick = function() { var myMenu = document.getElementById('myMenu'); myMenu.style.display = 'none'; } //顯示div function xianshi(){ var myDiv = document.getElementById('myDiv'); myDiv.style.display="block"; } //隱藏div function yc(){ var myDiv = document.getElementById('myDiv'); myDiv.style.display="none"; } </script> </head> <body> <div id="myMenu"> <ul> <li onclick="xianshi();">顯示</li> <li onclick="yc();">隱藏</li> </ul> </div> <div id="myDiv">我是內容</div> </body> </html>