我們在網頁中很多都有右鍵菜單的功能，一般點擊右鍵顯示的是瀏覽器默認的菜單選項，那么我們直接如何通過css+js實現html的右鍵菜單呢？這篇文章將講解html鼠標自定義右鍵菜單的實現原理和實現代碼。
實現原理
在HTML中基本上每個對象都有一個oncontextmenu事件，這個事件就是鼠標的右鍵單擊事件（onclick事件是鼠標的左鍵單擊事件），我們可以監聽oncontextmenu事件，阻止默認的瀏覽器右鍵菜單e.preventDefault();然后顯示我們想要顯示的菜單信息，當我們單擊其中某一項的時候，就執行我們設定的動作，然后將彈出窗口關閉。
辦公資源網址導航 https://www.wode007.com
實現代碼
css代碼:
<style> html,body{ width : 100%;height : 100%; margin: 0;padding: 0; } #menu{ width : 100px; padding: 10px; border : 1px solid #ddd; visibility : hidden; position : absolute; } </style>
html代碼:
<body id="container"> <div id="menu"> <a href="javascript:history.back();">后退</a> <hr/> <a href="javascript:history.back();">前進</a> </div> </body>
js代碼:
<script> window.oncontextmenu=function(e){ e.preventDefault();//取消默認的瀏覽器自帶右鍵 var evt = window.event || arguments[0]; var menu=document.getElementById('menu');//獲取右鍵菜單 var container = document.getElementById('container');//獲取區域 /*獲取當前鼠標右鍵按下后的位置，據此定義菜單顯示的位置*/ var rightedge =container.clientWidth-evt.clientX; var bottomedge =container.clientHeight-evt.clientY; console.log(container.clientHeight); /*如果從鼠標位置到容器右邊的空間小於菜單的寬度，就定位菜單的左坐標（Left）為當前鼠標位置向左一個菜單寬度*/ if (rightedge < menu.offsetWidth){ menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px"; }else{ /*否則，就定位菜單的左坐標為當前鼠標位置*/ menu.style.left = container.scrollLeft + evt.clientX + "px"; } /*如果從鼠標位置到容器下邊的空間小於菜單的高度，就定位菜單的上坐標（Top）為當前鼠標位置向上一個菜單高度*/ if(bottomedge < menu.offsetHeight){ menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px"; }else{/*否則，就定位菜單的上坐標為當前鼠標位置*/ menu.style.top = container.scrollTop + evt.clientY + "px"; } /*設置菜單可見*/ menu.style.visibility = "visible"; } window.onclick=function(e){//關閉右鍵菜單 document.getElementById('menu').style.visibility = 'hidden'; //用戶觸發click事件就可以關閉了，因為綁定在window上，按事件冒泡處理，不會影響菜單的功能 } </script>
這是個簡單例子，由於contextmenu事件支持所有 HTML 元素，這意味者你可以給不同的元素，自定義不同的右鍵菜單，由於contextmenu事件會冒泡傳播，子節點上觸發的事件，在父節點上也會觸發，所以應該調用對應的函數或者設置對應的屬性值來阻止事件冒泡。