clientX和clientY

最新推荐文章于 2023-11-17 01:55:00 发布

编程微刊

最新推荐文章于 2023-11-17 01:55:00 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_38822390/article/details/90703733

版权

####需求：
做项目中遇到一个这样的需求，点击属性菜单节点，出现显示框，显示框的位置随着鼠标点击的位置距离而改变。

###教程：
clientX 事件属性
http://www.runoob.com/jsref/event-clientx.html

clientY 事件属性
http://www.runoob.com/jsref/event-clienty.html

####基本定义

clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。客户区指的是当前窗口。

图片.png

####遇到的坑
这个功能在一些浏览器里面的兼容性和适配性的介绍

####jQuery右键点击弹出菜单，菜单随鼠标点击的位置的变化而变化

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
	</head>

	<body>
		<div class="dropdown open" id="treeContextMenu" style="display: none;position: absolute">
			<ul class="dropdown-menu">
				<li>
					<a href="javascript:;" id="toUpdateBtn">编辑</a>
				</li>
				<li>
					<a href="javascript:;" id="deleteBtn">删除</a>
				</li>
			</ul>
		</div>
	</body>
	<script>
		//屏蔽浏览器右键菜单
		document.oncontextmenu = function() {
			return false;
		}
		//按下鼠标
		$(document).mousedown(function(e) {
			var key = e.which;
			//获取鼠标键位
			if(key == 3)
			//(1:代表左键； 2:代表中键； 3:代表右键)	

			{
				//获取右键点击坐标
				var x = e.clientX;
				var y = e.clientY;
				$("#treeContextMenu").show().css({
					left: x,
					top: y
				});
			}
		});
		//点击任意部位隐藏
		$(document).click(function() {
			$("#treeContextMenu").hide();

		})
	</script>

</html>