<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>JS实现右键菜单</title> <mce:script language="javascript" type="text/javascript"><!-- function csMenu(_object, _menu) { this.IEventHander = null; this.IFrameHander = null; this.IContextMenuHander = null; this.Show = function(_menu) { var e = window.event || event; if (e.button == 2) { if (window.document.all) { this.IContextMenuHander = function(){return false;}; document.attachEvent("oncontextmenu", this.IContextMenuHander); } else { this.IContextMenuHander = document.oncontextmenu; document.oncontextmenu = function(){return false;}; } window.csMenu$Object = this; this.IEventHander = function(){window.csMenu$Object.Hide(_menu);}; if (window.document.all) document.attachEvent("onmousedown", this.IEventHander); else document.addEventListener("mousedown", this.IEventHander, false); _menu.style.left = e.clientX; _menu.style.top = e.clientY; _menu.style.display = ""; if (this.IFrameHander) { var _iframe = document.getElementById(this.IFrameHander); _iframe.style.left = e.clientX; _iframe.style.top = e.clientY; _iframe.style.height = _menu.offsetHeight; _iframe.style.width = _menu.offsetWidth; _iframe.style.display = ""; } } }; this.Hide = function(_menu) { var e = window.event || event; var _element = e.srcElement; do { if (_element == _menu) { return false; } } while ((_element = _element.offsetParent)); if (window.document.all) document.detachEvent("on"+e.type, this.IEventHander); else document.removeEventListener(e.type, this.IEventHander, false); if (this.IFrameHander) { var _iframe = document.getElementById(this.IFrameHander); _iframe.style.display = "none"; } _menu.style.display = "none"; if (window.document.all) document.detachEvent("oncontextmenu", this.IContextMenuHander); else document.oncontextmenu = this.IContextMenuHander; }; this.initialize = function(_object, _menu) { window._csMenu$Object = this; var _eventHander = function(){window._csMenu$Object.Show(_menu);}; _menu.style.position = "absolute"; _menu.style.display = "none"; _menu.style.zIndex = "1000000"; if (window.document.all) { var _iframe = document.createElement('iframe'); document.body.insertBefore(_iframe, document.body.firstChild); _iframe.id = _menu.id + "_iframe"; this.IFrameHander = _iframe.id; _iframe.style.position = "absolute"; _iframe.style.display = "none"; _iframe.style.zIndex = "999999"; _iframe.style.border = "0px"; _iframe.style.height = "0px"; _iframe.style.width = "0px"; _object.attachEvent("onmouseup", _eventHander); } else { _object.addEventListener("mouseup", _eventHander, false); } }; this.initialize(_object, _menu); } // --></mce:script> </head> <body> <!--菜单右键区域容器--> <div style="background-color:Red; width:100px; height:100px;" id="box"></div> <!--定制的右键菜单--> <div id="Menu" style="background-color:White; border:1px solid #cccccc; padding:10px;" mce_style="background-color:White; border:1px solid #cccccc; padding:10px;"> <li>打开</li> <li>打印</li> <li>回复发件人</li> <li>全部回复</li> <li>转发</li> <li>分配</li> <li>垃圾邮件</li> <li>删除</li> <li>归档此邮件</li> <li>分拣此邮件</li> </div> <!--注册菜单--> <mce:script type="text/javascript"><!-- var MM = new csMenu(document.getElementById("box"), document.getElementById("Menu")); // --></mce:script> <!--给id 为box 的区域注册Menu菜单--> </body> </html> 本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/lhypang/archive/2009/06/27/4302781.aspx
扫一扫
818
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
