clientX和clientY

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

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

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

####基本定义

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

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

clientX和clientY

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

####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>

原文作者:祈澈姑娘
关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

上一篇:js中 clientX/Y、pageX/Y、screenX/Y的区别


下一篇:点击事件的坐标计算(client || offset) +(X || Width || Left) 各种排列组合别绕晕