js网页右击弹出菜单

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!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=gb2312">
<title>js网页右击弹出菜单</title>
<style type="text/<a href=http://111com.net/cssdiv/css.html target=_blank >css</a>">
	html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;}
  .contextMenu{position:absolute;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;line-display:block;padding:0px;padding-left:10px;}
  .itemOver{background-color:#316AC5;color:#fff;cursor:default;}
   .separator{border-top:1px solid #cccccc;margin:0px;padding:0px;}
</style>

function contextMenu(pro<a href=http://111com.net/fw/photo.html target=_blank >ps</a>,events){
   this.pro<a href=http://111com.net/fw/photo.html target=_blank >ps</a> = pro<a href=http://111com.net/fw/photo.html target=_blank >ps</a>;
   this.events = events;
}

contextMenu.prototype.buildContextMenu = function(){
	 // 加载右键菜单体
   var menuObj = document.getElementById(this.pro<a href=http://111com.net/fw/photo.html target=_blank >ps</a>.menuID);
   
   // 提取菜单初始化设置的属性及事件
   var targetEle = this.pro<a href=http://111com.net/fw/photo.html target=_blank >ps</a>.targetEle;
   var eventFunc = this.events;
   
   // 初始化菜单项的mou<a href=http://111com.net/seo/seo.html target=_blank >seo</a>ver 和 mou<a href=http://111com.net/seo/seo.html target=_blank >seo</a>ut事件
   var _items = menuObj.getElementsByTagName("li");
  	for(var i=0;i<_items.length;i++){
  		if(_items[i].className != "separator"){
  			 _items[i].className = "item";
	  		 _items[i].onmou<a href=http://111com.net/seo/seo.html target=_blank >seo</a>ver = function(){this.className ="item itemOver";};
	  		 _items[i].onmou<a href=http://111com.net/seo/seo.html target=_blank >seo</a>ut = function(){this.className = "item";}	
  	  }
	  }

}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();}
  
  func = function(fid,srcEle){
  		eventFunc.bindings[fid](srcEle);
  }
  
  hide = function(){
   	 try{
  		 if(menuObj && menuObj.style.display != "none"){
  		 		menuObj.style.display = "none";
  		 	}
  	}catch(e){}
  }
  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;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/<a href=http://111com.net/js_a/js.html target=_blank >javascript</a>">
 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>

提示：您可以先修改部分代码再运行

js网页右击弹出菜单

相关文章

精彩推荐