工作中需要实现在网页上点右键弹出简单菜单的功能，在网上找了一些例子，都比较复杂，其实我这边只需要实现简单的菜单功能，两个选项，用户点击了以后实现一些简单的ajax功能。于是根据思路，用DOM创建一个菜单层，每个菜单选项有自己的onclick方法，激活相应的ajax功能，然后将层位置定义到鼠标点击点的右下方，如果点左键，那么删除菜单。很简单的就实现了，下面是代码：
function setDivRightMenu(divId) { $(divId).mousedown(function(event) { if (event.button == 2) { //这个很重要，屏蔽系统鼠标右键菜单功能
document.oncontextmenu = hideSysMenu; x = event.clientX; y = event.clientY; CreateMenu(event.target); var PopMenu = document.getElementById('div_RightMenu'); PopMenu.style.left = x - 2; PopMenu.style.top = y - 2; PopMenu.style.display = 'inline'; } if (event.button == 1) { removeDivRightMenu(); } }); } function hideSysMenu() { return false; } function CreateMenu(obj) { var div_Menu = document.createElement("Div"); div_Menu.id = "div_RightMenu"; div_Menu.className = "div_RightMenu"; //div_Menu.setAttribute("onMouseOut", "removeDivRightMenu();"); var div_Menu1 = document.createElement("Div"); div_Menu1.className = "divMenuItem"; div_Menu1.onclick = function() { selectDivRightMenu(1, obj); }; div_Menu1.innerHTML = "set"; var div_Menu2 = document.createElement("Div"); div_Menu2.className = "divMenuItem"; div_Menu2.onclick = function() { selectDivRightMenu(2, obj)}; div_Menu2.innerHTML = "free"; div_Menu.appendChild(div_Menu1); div_Menu.appendChild(div_Menu2); document.body.appendChild(div_Menu); } function removeDivRightMenu() { if (document.getElementById("div_RightMenu") != null) { element = document.getElementById("div_RightMenu"); element.parentNode.removeChild(element); } } function selectDivRightMenu(param1, param2) { if (param1 == 1) {
// removeDivRightMenu(); } else if (param1 == 2) { // removeDivRightMenu(); } }
