自定義鼠標右擊菜單要素：
- 禁止頁面默認右擊事件
- 設置右擊菜單的樣式以及菜單出現的位置（通過捕獲鼠標點擊位置來確定菜單的位置）
- 鼠標在指定控件（區域）上右擊時顯示菜單（默認菜單隱藏，點擊鼠標右鍵時顯示）
效果圖
代碼如下：
HTML代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" type="text/css" href="right-click.css" /> 10 </head> 11 12 <body> 13 14 <div class="contain" id="contain-friend">右擊顯示菜單</div> 15 <label id="label1"></label> 16 <div id="menu-friend" class="menu"> 17 <div class="menu-item"> 18 <button class="menu-item-btn" id="btn1">菜單一</button> 19 </div> 20 <div class="menu-item"> 21 <button class="menu-item-btn" id="btn2">菜單二</button> 22 </div> 23 24 </div> 25 <script src="right-click.js"></script> 26 </body> 27 28 </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是考慮加上滾動條的情況（實際上這個例子里面並沒有滾動條）。
1 window.onload = function() { 2 //以下為自定義右擊菜單 3 document.oncontextmenu = function(e) { 4 //阻止執行瀏覽器默認右擊事件 5 e.preventDefault(); 6 //聊天室好友列表 7 if (document.getElementById("menu-friend")) { 8 var menu1 = document.getElementById("menu-friend"); 9 menu1.style.display = "block"; 10 document.getElementById("contain-friend").onmousedown = function(e) { //菜單定位 11 menu1.style.left = e.offsetX + "px"; 12 menu1.style.top = document.documentElement.scrollTop + e.clientY + "px"; 13 //alert(menu1.style.top) 14 if (document.getElementById("contain-friend")) { 15 if (e.button == 2) { 16 menu1.style.visibility = "visible"; 17 } else { 18 menu1.style.visibility = "hidden"; 19 } 20 } 21 } 22 } 23 } 24 if (document.getElementById("btn1")) { 25 document.getElementById("btn1").onmousedown = function(e) { 26 document.getElementById("label1").innerHTML = "你點擊了菜單一" 27 } 28 } 29 if (document.getElementById("btn2")) { 30 document.getElementById("btn2").onmousedown = function(e) { 31 document.getElementById("label1").innerHTML = "你點擊了菜單二" 32 } 33 } 34 return false; 35 //與e.preventDefault();功能相同，但是必須放在最后否則在return后面的內容均不執行 36 }
CSS樣式表
1/*自定義右擊菜單*/ 2 3 .contain { 4 background-color: #D1CEBC; 5 height: 100px; 6 width: 300px; 7 } 8 9 .menu { 10 width: 150px; 11 background-color: white; 12 visibility: hidden; 13 position: absolute; 14 box-shadow: 0px 0px 10px #D1CEBC 15 } 16 17 .menu-item { 18 background-color: #fff; 19 margin: 0; 20 } 21 22 .menu-item-btn { 23 width: 146px; 24 margin: 2px; 25 border: 0; 26 text-align: left; 27 padding-left: 60px; 28 padding-top: 5px; 29 padding-bottom: 5px; 30 background-color: #fff; 31 color: #000; 32 } 33 34 .menu-item-btn:hover { 35 background-color: #D1CEBC; 36 }