自定义右键菜单

约定不等于承诺〃 2021-07-24 18:39 443阅读 0赞

禁止系统右键菜单
    		document.oncontextmenu=function(){
    			return false;   //false表示事件禁用
    		};
    
    获取鼠标蓝色框选中的内容
    	document.getSelection().toString();  //火狐不能得到文本框内的内容

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			*{ 
    				margin: 0px;
    				padding: 0px;
    			}
    			
    			ul{ 
    				list-style-type:none;
    				position:absolute;
    				display: none;
    			}
    			li{ 
    				height:40px;
    				line-height: 40px;
    				background-color: blue;
    				color:whitesmoke;
    				width:100px;
    				text-align: center;
    			}
    			
    			li:hover{ 
    				background-color: black;
    				
    			}
    		</style>
    	</head>
    	<body>
    		aaaa
    		<textarea name="" rows="40" cols="40">
    		</textarea>
    		<ul>
    			<li>刷新</li>
    			<li>离开页面</li>
    			<li>百度搜索</li>
    			<li>输入搜素</li>
    		</ul>
    		
    		<script>
    			
    			var ul=document.querySelector("ul");
    			var textarea=document.querySelector("textarea");
    			
    			//禁止系统右键菜单
    			document.oncontextmenu=function(event){ 
    				return false;
    			}
    			//当鼠标右键按下显示自定义菜单
    			document.onmousedown=function(event){ 
    				var event=event||window.event;
    				
    				var sx=event.clientX;
    				var sy=event.clientY;
    				
    				if(event.button==2)
    				{ 
    					ul.style.left=sx+'px';
    					ul.style.top=sy+"px";
    					ul.style.display="block";
    				}else{ 
    					ul.style.display="none";
    				}
    				
    			}
    			
    			//采用事件委托机制
    			ul.onmousedown=function(event)
    			{ 
    				var event=event||window.event;
    				if(event.target.innerHTML=="刷新")
    				{ 
    					window.location.reload();
    				}
    				if(event.target.innerHTML=="离开页面")
    				{ 
    					var flag=window.confirm("确定离开?")
    					if(flag)
    					{ 
    						
    						//火狐无效
    						window.close();
    					}
    				}
    				if(event.target.innerHTML=="百度搜索")
    				{ 
    					
    					//火狐不能得到文本框的内容，文本框外的能得到
    					var str=document.getSelection().toString();
    					alert(str);
    					window.open("http://www.baidu.com/s?wd="+str);
    					
    				}
    				if(event.target.innerHTML=="输入搜素")
    				{ 
    					var str=window.prompt("请输入搜索信息","aaa");
    					
    					window.open("http://www.baidu.com/s?wd="+str);
    					
    				}
    				
    				
    			}
    			
    		</script>
    	</body>
    </html>