簡約自定義右鍵選單模板
阿新 • • 發佈：2021-12-27
簡約自定義右鍵選單模板、
前言：
1. 我借鑑了網路上的程式碼
2. 程式碼沒有使用JQuery或者vue、react等，使用原生JS，便於後期各種版本直接使用
3. 這個是用於修改瀏覽器自帶的右鍵選單，改為自定義的，可以實現更多的功能。
簡約自定義右鍵選單模板、
前言：
1. 我借鑑了網路上的程式碼
2. 程式碼沒有使用JQuery或者vue、react等，使用原生JS，便於後期各種版本直接使用
3. 這個是用於修改瀏覽器自帶的右鍵選單，改為自定義的，可以實現更多的功能。
效果：
程式碼：
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name ="viewport" content ="width = device-width" /> <title>gxg</title> </head> <style lang="css"> /*右鍵選單*/ #contextmenu { visibility:hidden; position: absolute; width: 200px; margin: 0; padding: 0; background: #FFFFFF; border-radius: 5px; list-style: none; box-shadow: 0 15px 35px rgba(50,50,90,0.1), 0 5px 15px rgba(0,0,0,0.07); overflow: hidden; z-index: 999999; } #contextmenu li { border-left: 3px solid transparent; transition: ease .2s; } #contextmenu li a { display: block; padding: 10px; color: #808c92; text-decoration: none; transition: ease .2s; } #contextmenu li:hover { background: #adb; border-left: 3px solid #30b8ea; } #contextmenu li:hover a { color: #FFFFFF; } </style> <body> <!-- 預設隱藏 --> <ul id="contextmenu"> <li><a href="/">選項一</a></li> <li><a href="/">選項二</a></li> <li><a href="/">選項三</a></li> </ul> <script type="text/javascript"> //設定右鍵選單 window.onload=function(){ //獲取contextmenu尺寸 var menuWidth = document.getElementById("contextmenu").offsetWidth; var menuHeight = document.getElementById("contextmenu").offsetHeight; document.oncontextmenu = function(e){ //獲取螢幕寬度、高度 var winWidth = window.innerWidth; var winHeight = window.innerHeight; //獲取點選位置 var posX = e.pageX; var posY = e.pageY; //保持右鍵選單在螢幕內: if(posX + menuWidth + 10 >= winWidth&& posY + menuHeight + 10 >= winHeight){ //超出了右下方: posLeft = posX - menuWidth - 10 + "px"; posTop = posY - menuHeight - 10 + "px"; } else if(posX + menuWidth + 10 >= winWidth){ //超出了右側: posLeft = posX - menuWidth - 10 + "px"; posTop = posY + 10 + "px"; } else if(posY + menuHeight + 10 >= winHeight){ //超出了底部: posLeft = posX + 10 + "px"; posTop = posY - menuHeight - 10 + "px"; } else { //預設右下方顯示: posLeft = posX + 10 + "px"; posTop = posY + 10 + "px"; }; document.getElementById("contextmenu").style.cssText = 'visibility:visible;left: '+posLeft+';top: '+posTop; return false;//取消瀏覽器自帶的右鍵選單 }; document.onclick=function(){ document.getElementById("contextmenu").style.display = 'none'//點選其他位置隱藏 }; }; </script> </body> </html>
分享從不妥協，程式碼改變世界。
來自戈小戈，轉載請註明原文連結：https://www.cnblogs.com/wsgxg/p/15737350.html
有問題，QQ聯絡我:960651764