今天分享一個，單擊鼠標右鍵彈出自定義菜單，選中不同菜單選項，實現其對應功能

　? ?首先先自已定義一個菜單

<div id="menu"><ul><li>添加</li><li>刪除</li><li>修改</li></ul></div>

　　對菜單進行簡單的樣式設置，并且設置為隱藏狀態

#menu {width: 80px;background: #CCC;position: absolute;display: none;}

　主體區域的內容代碼

<div id="content">前端通常是指網站的表現層和結構層。因此前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，現在最新的高級版本HTML5、CSS3，以及SVG等。HTML、CSS、JavaScript是前端開發中最基本也是最必須的三個技能。前端的開發中，在頁面的布局時，HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互。雖然表面看起來很簡單，但這里面需要掌握的東西絕對不會少。在進行開發前，需要對這些概念弄清楚、弄明白，這樣在開發的過程中才會得心應手。</div>

　　在這個content容器里實現鼠標的右鍵打開菜單功能，主要的js代碼如下

<script>
　　　　//　獲取當前的元素var content = document.getElementById("content"); content.oncontextmenu = function (ev) {//阻止鼠標的默認事件ev.preventDefault();
//做一些兼容性的處理var ev = ev || event;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;menu.style.display = "block";menu.style.left = ev.clientX + "px";//當滑動滾動條時也能準確獲取菜單位置menu.style.top = ev.clientY + scrollTop + "px";// return false;}// 事件委托的方式 實現自定義菜單的功能var ul = document.querySelector('ul')ul.onclick = function (e) {var t = e.targetif (t.innerText == '添加') {輸入你想實現的功能代碼，并且點擊后把菜單隱藏menu.style.display = "none";}} </script>

　　通過事件委托，判斷每次點擊菜單的內容，寫出相應的邏輯代碼，完成相應的功能。

? ? ? ?contextmenu事件支持所有 HTML 元素，這意味者你可以給不同的元素，自定義不同的右鍵菜單。

轉載于:https://www.cnblogs.com/zhige-1/p/11097044.html

總結

以上是生活随笔為你收集整理的js实现右键单击打开自定义的菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。