自定义右键菜单

来源：互联网发布：天正软件那里有卖编辑：程序博客网时间：2024/06/11 07:18

computer001同学的右键菜单，今天有空改了改，把FF和IE的兼容完成了，也加入了一些自己的想法。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>show menu </title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul{
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
list-style:none;
}
ul li{
width:130px;
height:30px;
line-height:30px;
margin:0px;
text-align:left;
}
ul li a{
display:block;
border-left:10px #f7d solid;
padding-left:5px;
background:#CCC;
color:#333;
text-decoration:none;
}
ul li a:hover{
background:#3cf;
color:#fff;
}
</style>

/*添加事件*/
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
  oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
  oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
  oTarget["on" + sEventType] = fnHandler;
}
};

/*注销事件*/
function romoveEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
  oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) {
  oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
  oTarget["on" + sEventType] = "";
}
};

/*显示菜单*/
function showRightMenu(e) {
var oEvent =e||event; //兼容IE、FF
var MouseRightMenu = document.getElementById("MouseRightMenu");
var X,Y; //X,Y鼠标坐标
X = isIE? oEvent.clientX : oEvent.pageX;
Y = isIE? oEvent.clientY : oEvent.pageY;

if(oEvent.button==2||(isTT && oEvent.button ==0)) //IE、FF、Maxthon3右键为2，TT为0;
{
  if((X>document.body.clientWidth&&X<document.body.offsetWidth)||(Y>document.body.clientHeight&&Y<document.body.offsetHeight)){
   closeRightMenu();
   return;
  }
  MouseRightMenu.style.display="block";
  var client_X,client_Y;

  client_X = (X+MouseRightMenu.offsetWidth>document.body.clientWidth)? X-MouseRightMenu.offsetWidth : X; //菜单窗口自适应
  client_Y = (Y+MouseRightMenu.offsetHeight>document.body.clientHeight)? Y-MouseRightMenu.offsetHeight : Y; //菜单窗口自适应
  MouseRightMenu.style.left = client_X+"px";
  MouseRightMenu.style.top = client_Y+"px";

  addEventHandler(window, "resize", closeRightMenu);
  addEventHandler(window, "scroll", closeRightMenu);

}else{
  if(MouseRightMenu.style.display=="block"){
   var rect=MouseRightMenu.getBoundingClientRect();//返回一个TextRectangle对象，包含left,top,right和bottom几个只读属性，以px为单位来表示边界框相对视窗左上角的位置。
   if(X<rect.left||X>rect.left+MouseRightMenu.offsetWidth||Y<rect.top||Y>rect.top+MouseRightMenu.offsetHeight) //判断鼠标坐标是否在菜单Div内
   {
    closeRightMenu();
   }
  }
}
}
/*关闭菜单*/
function closeRightMenu() {
var MouseRightMenu = document.getElementById("MouseRightMenu");
MouseRightMenu.style.display="none";

romoveEventHandler(window, "resize", closeRightMenu);
romoveEventHandler(window, "scroll", closeRightMenu);
}
//-------------------------//

/*菜单功能模块*/
function reflash() {
window.location.reload();
}
function changerbg() {
document.bgColor="#ccffcc";
closeRightMenu();
}
function alertme() {
closeRightMenu();
alert("hello world"+document.URL);
}
function closewindow() {
closeRightMenu();
window.opener=null;
window.open('','_self');
window.close();
}

function changerchar() {
var sObj = document.getElementsByTagName("span");
sObj[0].style.color="red";
closeRightMenu();
}

function nosrcoll() {
b1.scroll = "no" ;
closeRightMenu();
}
//------------------------//
document.onclick = showRightMenu;
document.onmousedown = showRightMenu;
</script>
<body id="b1" oncontextmenu="return false">
<div id="MouseRightMenu" style="position:absolute;display:none; background:#999; z-index:10">
<ul><li><a href="#" onClick="nosrcoll();">关掉滚动</a></li><li><a href="#" onClick="changerchar();">字体变色</a></li><li><a href="#" onClick="reflash();">刷新页面</a></li><li><a href="#" onClick="changerbg();">背景变色</a></li><li><a href="#" onClick="alertme();">弹出提示</a></li><li><a href="#" onClick="closewindow();">退出系统</a></li></ul>
</div>
<span style=" font-size:18px; position:absolute; top:300px; left:400px;">用鼠标点右键，会弹出与众不同的菜单来 </span>
</body>
</html>