原理
当用户点击右键时会触发一个contextmenu事件，默认会触发浏览器的默认的上下文菜单，通过手动阻止这个默认行为，然后再显示自定义的上下文菜单，当用户单击时隐藏这个菜单即可。
代码
1、html
<div > <div> </div> <div> </div> <ul> <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"); // 获取鼠标右击时的坐标，并设置上下文菜单出现位置 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"; });
代码出现的EventUtil在这篇文章有介绍： 《js跨浏览器的事件侦听器和事件对象的使用方法》