這次帶給大家JS如何實現自訂滑鼠右鍵選單,JS實作自訂滑鼠右鍵選單的注意事項有哪些,以下就是實戰案例,一起來看一下。
自訂滑鼠右鍵選單要素:
禁止頁面預設右鍵事件
#設定右鍵選單的樣式以及選單出現的位置(透過捕捉滑鼠點擊位置來確定選單的位置)
滑鼠在指定控制項(區域)上右鍵時顯示選單(預設選單隱藏,點擊滑鼠右鍵時顯示)
效果圖
程式碼如下:
HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" type="text/css" href="right-click.css" /> </head> <body> <div id="contain-friend">右击显示菜单</div> <label id="label1"></label> <div id="menu-friend"> <div> <button id="btn1">菜单一</button> </div> <div> <button id="btn2">菜单二</button> </div> </div> <script src="right-click.js"></script> </body> </html>
HTML
JS代碼
關於選單的定位主要是在第一個if語句部分,後面為驗證按鈕效果。
menu1.style.left和menu1.style.top用來定位選單定位,由css樣式表可知menu1的position屬性定位為absolute,style.top定位相對於離它最近的position屬性值不為static的父輩元素,此處為body。
menu的位置需要根據頁面佈局的具體情況來判斷是e.offsetX/Y、e.clientX/Y或是其它,此處加上document.documentElement.scrollTop是考慮加上滾動條的情況(實際上這個例子裡面並沒有滾動條)。
window.onload = function() { //以下为自定义右击菜单 document.oncontextmenu = function(e) { //阻止执行浏览器默认右击事件 e.preventDefault(); //聊天室好友列表 if (document.getElementById("menu-friend")) { var menu1 = document.getElementById("menu-friend"); menu1.style.display = "block"; document.getElementById("contain-friend").onmousedown = function(e) { //菜单定位 menu1.style.left = e.offsetX + "px"; menu1.style.top = document.documentElement.scrollTop + e.clientY + "px"; //alert(menu1.style.top) if (document.getElementById("contain-friend")) { if (e.button == 2) { menu1.style.visibility = "visible"; } else { menu1.style.visibility = "hidden"; } } } } } if (document.getElementById("btn1")) { document.getElementById("btn1").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单一" } } if (document.getElementById("btn2")) { document.getElementById("btn2").onmousedown = function(e) { document.getElementById("label1").innerHTML = "你点击了菜单二" } } return false; //与e.preventDefault();功能相同,但是必须放在最后否则在return后面的内容均不执行 }
JavaScript檔案
CSS樣式表
1/*自訂右鍵選單*/
.contain { background-color: #D1CEBC; height: 100px; width: 300px; } .menu { width: 150px; background-color: white; visibility: hidden; position: absolute; box-shadow: 0px 0px 10px #D1CEBC } .menu-item { background-color: #fff; margin: 0; } .menu-item-btn { width: 146px; margin: 2px; border: 0; text-align: left; padding-left: 60px; padding-top: 5px; padding-bottom: 5px; background-color: #fff; color: #000; } .menu-item-btn:hover { background-color: #D1CEBC; }
#相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
以上是JS如何實現自訂滑鼠右鍵選單的詳細內容。更多資訊請關注PHP中文網其他相關文章!