JS 实现右键菜单

来源：互联网发布：java最新框架组合编辑：程序博客网时间：2024/05/18 16:17
源码源在网上，具体在哪找的，我也记不清了，所以没办法贴出网址了，真不好意思；下面是代码，供大家分享，IE6，FF测试通过
<!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>sdf</title><style type="text/css">html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;}.contextMenu{position:absolute;width:100px;height:50px;margin:0px;padding:2px;border:1px solid #cccccc;background-color:#F2F2EE;}ul,li{list-style:none;margin:0px;padding:0px;}.item{list-style:none;margin:0px;padding:0px;height:25px;line-height:25px;display:block;padding:0px;padding-left:10px;}.itemOver{background-color:#316AC5;color:#fff;cursor:default;}.separator{height:1px;border-top:1px solid #cccccc;margin:0px;padding:0px;}</style><script type="text/javascript"><!--function contextMenu(props,events){   this.props = props;   this.events = events;}contextMenu.prototype.buildContextMenu = function(){ // 加载右键菜单体   var menuObj = document.getElementById(this.props.menuID);      // 提取菜单初始化设置的属性及事件   var targetEle = this.props.targetEle;   var eventFunc = this.events;      // 初始化菜单项的mouseover 和 mouseout事件   var _items = menuObj.getElementsByTagName("li");  for(var i=0;i<_items.length;i++){  if(_items[i].className != "separator"){   _items[i].className = "item";   _items[i].onmouseover = function(){this.className ="item itemOver";};   _items[i].onmouseout = function(){this.className = "item";}    }  }   document.oncontextmenu = function(evt){        var _bodyWidth = null; var _bodyHeight = null; var _mWidth = null; var _mHeight = null; var _px = null; var _py = null;  try{  var cobj = ele(evt);  if(cobj.className == targetEle){  // 绑定菜单项点击事件    for(var j=0;j<_items.length;j++){    if(_items[j].className != "separator"){   _items[j].onclick = function(){hide();func(this.id,cobj);};      }    }    // 判断显示位置  _px = parseInt(getX(evt));  _py = parseInt(getY(evt));  _bodyWidth = parseInt(document.body.offsetWidth ||document.body.clientWidth);  _bodyHeight = parseInt(document.body.offsetHeight || document.body.clientHeight);  _mWidth = parseInt(menuObj.style.width);  _mHeight = parseInt(menuObj.offsetHeight);  menuObj.style.left = ((_px + _mWidth) > _bodyWidth?(_px - _mWidth):_px) +"px";menuObj.style.top  = ((_py + _mHeight) > _bodyHeight?(_py - _mHeight):_py) +"px";menuObj.style.display = "block";  }else{    hide();  }  }catch(e){  }finally{  _bodyWidth = null;  _bodyHeight = null;  _mWidth = null;  _mHeight = null;  _px = null;    _py = null;  clearEventBubble(evt);  return false;  }   }  document.onclick = function(){hide();}   var func = function(fid,srcEle){  eventFunc.bindings[fid](srcEle);  }   var hide = function(){    try{   if(menuObj && menuObj.style.display != "none"){   menuObj.style.display = "none";   }  }catch(e){}  } var ele = function(evt){      evt = evt||window.event;      var _ele = null;      try{      _ele = (evt.srcElement || evt.target);      return _ele;      }catch(e){      }finally{      _ele = null;      }   }}/*==============================================================*/ function getX(evt){   var _x = null; try{ evt = evt || window.event; _x = (evt.x || evt.clientX || evt.pageX); return _x; }catch(e){ }finally{ _x = null; }}function getY(evt){var _y = null; try{ evt = evt || window.event; _y = (evt.y || evt.clientY || evt.pageY); return _y; }catch(e){ }finally{ _y = null; }}function clearEventBubble(evt){   evt = evt || window.event;      if(evt.stopPropagation){    evt.stopPropagation();   }else{     evt.cancelBubble = true;    }       if(evt.preventDefault){     evt.preventDefault();    }else{        evt.returnValue = false;    }} //--></script></head><body><div id="c11" class="contextMenu" style="top:20px;left:100px;">c11 -- 右击我</div><div id="c22" class="contextMenu" style="top:20px;left:250px;">c22 -- 右击我</div><div id="c33" class="contextMenu" style="top:20px;left:400px;">c33 -- 右击我</div><div id="c44" class="contextMenu" style="top:20px;left:550px;">c44 -- 右击我</div> <div id="bmenu" style="position:absolute;display:none;top:0px;left:0px;width:150px;margin:0px;padding:2px;border:1px solid #cccccc;background-color:#CEE2FF;"> <ul> <li id="checkLink">检测连接</li> <li id="edit">编辑</li> <li id="del">删除</li> <li class="separator"></li> <li id="prop">属性</li> </ul> </div> </body><script type="text/javascript"> var cmenu = new contextMenu(       {  menuID : "bmenu",  targetEle : "contextMenu"   },   {  bindings:{  'checkLink' : function(o){alert("检测连接 "+o.id);},  'edit' : function(o){alert("编辑 "+o.id);},  'del' : function(o){alert("删除 "+o.id);},  'prop' : function(){alert("查看属性");}  } } );  cmenu.buildContextMenu();</script></html>