兼容FF的右键菜单代码,JS代码库,德仔网

代码语言
代码分类
【JS】兼容FF的右键菜单
作者:李敬塔 / 发布于2012/12/5/ 832
<!--
-- cateDate: 2009-06-13
--author:Tiger Li
-->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
body{
  font-size:12px;
  color:#333;
}
*.contextMenu {
 Z-INDEX: 99999; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BORDER-LEFT: #ccc 1px solid; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 120px; PADDING-RIGHT: 0px; DISPLAY: none; BACKGROUND: #eee; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid; PADDING-TOP: 0px
}
.contextMenu LI {
 PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px;cursor:default;
}
*.contextMenu LI DIV{
 background:transparent;width:100%;display:inline;PADDING-LEFT:28px;LINE-HEIGHT:20px; COLOR: #333;
}
*.contextMenu A {
 PADDING-BOTTOM: 1px; LINE-HEIGHT: 20px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; PADDING-LEFT: 28px; OUTLINE-WIDTH: medium; PADDING-RIGHT: 5px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: 6px center; HEIGHT: 20px; COLOR: #333; TEXT-DECORATION: none; PADDING-TOP: 1px
}
.contextMenu  A:hover {
 BACKGROUND-COLOR: #3399ff; COLOR: #fff
}
*.contextMenu LI.separator {
 BORDER-TOP: #ccc 1px solid
}
.contextMenu LI UL{
 position:absolute;cursor:default;margin:0px;padding:0px;display:none;BORDER: #ccc 1px solid;white-space:nowrap;LINE-HEIGHT:20px;
 BACKGROUND: #eee;Z-INDEX: 100000;
}
.objMouseOver{
BACKGROUND-COLOR: #3399ff; COLOR: #fff;
}
.objMouseOut{
BACKGROUND-COLOR: #eee; COLOR: #333;
}
</style>
<script language="javascript">
var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
 var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1; 
function $(id){
  if(document.getElementById(id)){
   return document.getElementById(id);
  }else{
   alert("没有找到!");
  }
}
function showContextMenu(menuObjid,e){
  var contextMenuObj=$(menuObjid);
   contextMenuObj.style.display='block';
   if(document.all)e = event;
   var xPos = e.clientX;
   if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
    xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 18; 
   }
   
   var yPos = e.clientY;
   
    if(yPos + contextMenuObj.clientHeight > (document.documentElement.clientHeight-20)){
       yPos = yPos -contextMenuObj.clientHeight-5;
     }else{ yPos = e.clientY;}
   /* * */
   contextMenuObj.style.left = xPos + 'px';
   contextMenuObj.style.top = yPos + 'px';
  
   return false; 
 }
 
 function hideContextMenu(menuObjid,e){
  var contextMenuObj=$(menuObjid);
  if(document.all) e = event;
  if(e.button==0 && !MSIE){
   
  }else{
   contextMenuObj.style.display='none';
  }
 }
 
function getPosition(Obj) {
 try{
  var sumTop = 0;
  var sumLeft = 0;
   var offsetParent =Obj;
  while(offsetParent!=null && offsetParent!=document.body){
   sumTop  += offsetParent.offsetTop;
   sumLeft += offsetParent.offsetLeft;
   offsetParent=offsetParent.offsetParent;
  }
  return {left:sumLeft,top:sumTop};
 }
 catch(e){}
}
 function liMouseOver(thisObj){
  var childUL=thisObj.getElementsByTagName("UL");
  var childDIV=thisObj.getElementsByTagName("DIV");
   if(childDIV[0]!=null){
    childDIV[0].style.color='#fff';
   }
   thisObj.style.background='#3399ff';
   if(childUL[0]!=null){
    childUL[0].style.display='inline';
    var xPos=getPosition(thisObj).left;
    if(xPos + (thisObj.offsetWidth+childUL[0].offsetWidth) > (document.documentElement.offsetWidth)){
     xPos= -(childUL[0].offsetWidth);
    }else{
     xPos=thisObj.offsetWidth;
    }
    childUL[0].style.left = xPos + 'px';
   }
 }
 function liMouseOut(thisObj){
  var childUL=thisObj.getElementsByTagName("UL");
  var childDIV=thisObj.getElementsByTagName("DIV"); 
   if(childDIV[0]!=null){
    childDIV[0].style.color='#333';
   }
   thisObj.style.background='#eee';
   if(childUL[0]!=null){
    childUL[0].style.display='none';
   }
 }
</script>
</head>
<body>
<div  id="testmenu">
试试我啊，啊啊。
</div>
<!--要弹出的菜单项-->
 <UL id="myMenu" class="contextMenu">
 <LI class="message"><A onmouseover="this.className=''" href="">发消息</A></LI>
 
 <LI class="separator"><A onmouseover="this.className=''"  href="">高级隐身</A></LI> 
 
 <LI class="separator"><A  onmouseover="this.className=''"  href="">发贺卡</A></LI> 
 
 <LI class="separator"><A  onmouseover="this.className=''"  href="">发邮件</A></LI> 
 
 <LI class="separator"><A onmouseover="this.className=''"  href="">查看对话记录</A></LI> 
 
 <LI class="separator"><A onmouseover="this.className=''"  href="">查看此人资料</A></LI> 
 
 <!--<LI class="separator"  onmouseover="this.getElementsByTagName('DIV')[1].style.display='';this.style.background='#3399ff';" onmouseout="this.getElementsByTagName('DIV')[1].style.display='none';this.style.background='#eee';"><div style="background:transparent;" onmousemove="this.style.color='#fff';" onmouseout="this.style.color='#333';">将此人复制到▼</div><div style="position:absolute;cursor:default;margin-left:0px;display:none;width:50px;BORDER: #ccc 1px solid;PADDING-LEFT:1px;" onmousemove="this.style.color='#fff';this.style.background='#3399ff';" onmouseout="this.style.color='#333';this.style.background='#eee';">复制到群</div></LI>-->
 
 <LI class="separator" onmouseover="liMouseOver(this)" onmouseout="liMouseOut(this)"><div>将此人复制到▼</div><ul><li onmouseover="this.className='objMouseOver'" onmouseout="this.className='objMouseOut'">复制到群</li></ul></LI>
 
 <LI class="separator" onmouseover="liMouseOver(this)" onmouseout="liMouseOut(this)"><div>将此人移动到▼</div><ul><li onmouseover="this.className='objMouseOver'" onmouseout="this.className='objMouseOut'">移动到组</li><li style="BORDER-TOP: #ccc 1px solid" onmouseover="this.className='objMouseOver'" onmouseout="this.className='objMouseOut'" >移动到群</li></ul></LI>
 
 <LI class="separator"><A onmouseover="this.className=''"  href="">加入同学</A></LI> 
 
 <LI class="separator"><A onmouseover="this.className=''"  href="">加入黑名单</A></LI> 
 
 <LI class="separator"><A onmouseover="this.className=''"  href="">游戏</A></LI>

 <LI class="separator"><A onmouseover="this.className=''"  href="">从该组删除</A></LI> 
 
 <LI class="separator"><A onmouseover="this.className=''"  href="">修改备注</A></LI> 
 
 <LI class="separator"><A onmouseover="this.className=''"   href="">赠送礼物</A></LI> 
  
</UL>
<script>
//当点击testmenu这个对象时，会弹出菜单.
//$("testmenu").oncontextmenu=function(event){
 //showContextMenu("myMenu",event);
 //return false;//关闭默认弹出菜单
//}

//当点击窗口时，会弹出的菜单
document.oncontextmenu=function(event){

 showContextMenu("myMenu",event);
 return false;
}


document.onclick=function(event){
hideContextMenu("myMenu",event);
}
</script>
<div id="test"></div>
</body>
</html>
试试其它关键字
　右键菜单　
同语言下
可能有用的
李敬塔贡献的其它代码(13)