自定义右键菜单

最新推荐文章于 2024-08-14 10:11:27 发布

神奇大叔

最新推荐文章于 2024-08-14 10:11:27 发布

阅读量148

点赞数

分类专栏： javaScript 网页制作案例

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103378963

版权

javaScript 同时被 2 个专栏收录

127 篇文章 6 订阅

订阅专栏

网页制作案例

41 篇文章 3 订阅

订阅专栏

禁止系统右键菜单
		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>