鼠标右键点击出弹窗效果

前端老实人灬

已于 2022-02-22 10:46:55 修改

阅读量312

点赞数

分类专栏：笔记文章标签： javascript css3 css

于 2020-10-22 09:29:00 首次发布

本文链接：https://blog.csdn.net/weixin_45264424/article/details/109215176

版权

笔记专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#mapEdit{
				position: absolute;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="data-items-title">111</div>
		<div id="mapEdit">22</div>
		
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			 $(".data-items-title").contextmenu(function(ev){
			            ev.preventDefault();           //做一些兼容性的处理
			            var ev = ev || event;
			            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			            mapEdit.style.display = "block";
			            mapEdit.style.left = ev.clientX + "px";
			            //当滑动滚动条时也能准确获取菜单位置
			            mapEdit.style.top = ev.clientY + scrollTop + "px";
					})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#mapEdit {
				position: absolute;
				display: none;
			}

			.data-items-title {
				width: 500px;
				height: 500px;
				background-color: pink;
			}

			#rightHand {
				font-size: 14px;
				position: absolute;
				top: 10px;
				left: 10px;
				display: none;
				background-color: #FFFFFF;
				border-radius: 4px;
				padding: 5px 10px;
			}
			#rightHand .delete-btn,#rightHand .edit-btn{
				cursor: pointer;
				line-height: 24px;
			}

			.rightHand-pop {
				background-color: #FFFFFF;
				border-radius: 4px;
				padding: 14px 10px;
				position: absolute;
				top: 50%;
				left: 101%;
				display: none;
			}
			.rightHand-pop .list{
				width: 260px;
				margin-bottom: 12px;
			}
			.rightHand-pop .list input{
				outline: none;
				margin-left: 10px;
			}
			.rightHand-pop .hand-footer{
				display: flex;
				justify-content: center;
			}
			.rightHand-pop .hand-footer div{
				margin: 0 8px;
				padding: 2px 8px;
				border-radius: 2px;
				color: #FFFFFF;
				background-color: #1E9FFF;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="data-items-title">111</div>
		<div id="rightHand">
			<div class="delete-btn">删除</div>
			<div class="edit-btn">编辑</div>
			<div class="rightHand-pop">
				<div class="list">
					<span class="tit">围栏名称</span>
					<input type="text" class="crawl-name" />
				</div>
				<div class="list">
					<span class="tit">围栏信息</span>
					<input type="text" class="crawl-info" />
				</div>
				<div class="hand-footer">
					<div class="hand-save">确定</div>
					<div class="hand-cancel">取消</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 点击删除
			$(".delete-btn").click(function(){
			})
			// 点击编辑
			$(".edit-btn").click(function(){
				$(".rightHand-pop").show()
			})
			// 点击确定
			$(".hand-save").click(function(){
				var name=$(".crawl-name").val()
				var info=$(".crawl-info").val()
				$(".rightHand-pop").hide()
				$("#rightHand").hide()
			})
			// 点击取消
			$(".hand-cancel").click(function(){
				$(".rightHand-pop").hide()
				$("#rightHand").hide()
			})
			
			document.onmouseup = function (event) {
			            if (event.button === 2) {
							var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
								$("#rightHand").show()
								$("#rightHand").offset({
									"left": event.clientX,
									"top": event.clientY + scrollTop
								});
			            }
			        }
			document.oncontextmenu = function () {
				return false
			};
					
					
			// $(".data-items-title").contextmenu(function(ev) {
			// 	ev.preventDefault(); //做一些兼容性的处理
			// 	var ev = ev || event;
			// 	var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
			// 	$("#rightHand").show()
			// 	$("#rightHand").offset({
			// 		"left": ev.clientX,
			// 		"top": ev.clientY + scrollTop
			// 	});
			// })
		</script>
	</body>
</html>

前端老实人灬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标右键点击出弹窗效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #mapEdit{ position: absolute; display: none; } </style> </head> <body> <d
复制链接

扫一扫