本文實例講述了js調(diào)出上下文菜單的實例代碼，分享給大家供大家參考，具體如下：
原理
當用戶點擊右鍵時會觸發(fā)一個contextmenu事件，默認會觸發(fā)瀏覽器的默認的上下文菜單，通過手動阻止這個默認行為，然后再顯示自定義的上下文菜單，當用戶單擊時隱藏這個菜單即可。
代碼
1、html
<div id="box" style="color:red;width: 100%;height:1000px;" > <div id="left" style="float:left;width:500px;margin-left: 50px;height:500px;background: #cdeddf;"> </div> <div id="right" style="float:right;width:600px;margin-right: 50px;height:500px;background: #cdeaae;"> </div> <ul id="menu" style="position: absolute;visibility: hidden;list-style: none;"> <li>按鈕1</li> <li>按鈕2</li> <li>按鈕3</li> </ul></div>
2、js
// 添加contextmenu事件 var right = document.getElementById("right"); EventUtil.addEventListener(right, "contextmenu", function(event) { event = EventUtil.getEvent(event); EventUtil.preventDefault(event); var menu = document.getElementById("menu"); // 獲取鼠標右擊時的坐標，并設置上下文菜單出現(xiàn)位置 page = EventUtil.getPagePosition(event); menu.style.left = page.pageX + "px"; menu.style.top = page.pageY + "px"; menu.style.visibility = "visible"; }); // 添加隱藏上下文菜單事件 EventUtil.addEventListener(document, "click", function(event) { var menu = document.getElementById("menu"); menu.style.visibility = "hidden"; }); 代碼出現(xiàn)的EventUtil在這篇文章有介紹： 《js跨瀏覽器的事件偵聽器和事件對象的使用方法》
以上就是本文的全部內(nèi)容，教大家js調(diào)出上下文菜單的方法，希望對大家的學習有所幫助。
