javascript+css 实现右键菜单 (IE, firefox,chrome)

 

基本原理:我们知道鼠标的右键单击事件是通过document.oncontextmenu来调用的,如果我们自行定义document.oncontextmenu=某个函数,这样就可以实现新右键菜单的调用了,关键问题是如何通过这个函数来控制菜单的显示,同时,还要通过窗体的单击事件document.body.onclick(一般指左键单击)来隐藏菜单,这样一个过程就完成了鼠标右键菜单的弹出和隐藏。
源码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> RightMenu</TITLE> <mce:style><!-- - body { background-color:#3a6ea5; font-size:12px; } /* 右键菜单Start */ #rightmenu { position:absolute; z-index:15; background-color:#cccccc; border:1px solid #eee; width:150px; -moz-border-radius:3; height:160px; display:none; } #rightmenubg { position:absolute; z-index:14; width:150px; height:160px; background-color:#cccccc; -moz-opacity: 0.30; -moz-border-radius:3; filter: progid:dximagetransform.microsoft.blur(pixelradius=2,makeshadow="true",shadowopacity=0.4); display:none; } #rightmenu a { display:block; width:150px; height:20px; line-height:20px; text-decoration: none; color:#000000; } #rightmenu a:hover { color:#000000; background-color:#009; } /* 右键菜单End */ - --></mce:style><style mce_bogus="1">- body { background-color:#3a6ea5; font-size:12px; } /* 右键菜单Start */ #rightmenu { position:absolute; z-index:15; background-color:#cccccc; border:1px solid #eee; width:150px; -moz-border-radius:3; height:160px; display:none; } #rightmenubg { position:absolute; z-index:14; width:150px; height:160px; background-color:#cccccc; -moz-opacity: 0.30; -moz-border-radius:3; filter: progid:dximagetransform.microsoft.blur(pixelradius=2,makeshadow="true",shadowopacity=0.4); display:none; } #rightmenu a { display:block; width:150px; height:20px; line-height:20px; text-decoration: none; color:#000000; } #rightmenu a:hover { color:#000000; background-color:#009; } /* 右键菜单End */ -</style> </HEAD> <BODY onclick="bodyclick(event)" oncontextmenu="return showcontextmenu(event)"> <mce:script type="text/javascript"><!-- var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox document.write("<div id=/"rightmenu/"></div>"); document.write("<div id=/"rightmenubg/"></div>"); Array.prototype.c = Array.prototype.concat; function buffer() { var s = []; s = s.c(["<a href="/" mce_href="/""/"> 项目一</a>"]); s = s.c(["<a href="/" mce_href="/""/"> 项目二</a>"]); s = s.c(["<a href="/" mce_href="/""/"> 项目三</a>"]); s = s.c(["<hr>"]); s = s.c(["<a href="/" mce_href="/""/"> 项目五</a>"]); s = s.c(["<a href="/" mce_href="/""/"> 项目六</a>"]); s = s.c(["<a href="/" mce_href="/""/"> 项目七</a>"]); s = s.c(["<a href="/" mce_href="/""/"> 项目作</a>"]); s = s.join(""); document.getElementById("rightmenu").innerHTML = s; } var rightmenu = document.getElementById("rightmenu"); var rightmenubg = document.getElementById("rightmenubg"); var body = document.body; var ex=0,ey=0; function showcontextmenu(evt) { ex = evt.clientX;ey = evt.clientY; rxy(); rightmenu.style.display = "block"; rightmenubg.style.display = "block"; evt.cancelBubble = true; return false; } function bodyclick(evt) { rightmenu.style.display = "none";//关闭右键菜单 rightmenubg.style.display = "none";//关闭右键菜单 } function rxy() { var step=3; if(ie){step=1} if(ff){step=6} if(ex+150>body.clientWidth) { rightmenu.style.left = ex - 150; rightmenubg.style.left = ex - 150 + step; } else { rightmenu.style.left = ex; rightmenubg.style.left = ex + step; } if(ey+200>body.clientHeight) { rightmenu.style.top = ey - 160; rightmenubg.style.top = ey - 160 + step; } else { rightmenu.style.top = ey; rightmenubg.style.top = ey + step; } } window.onload = function() { buffer(); } // --></mce:script> </BODY> </HTML> 

 

你可能感兴趣的:(javascript+css 实现右键菜单 (IE, firefox,chrome))