clientX和clientY 事件属性的使用
需求：
做项目中遇到一个这样的需求，点击属性菜单节点，出现显示框，显示框的位置随着鼠标点击的位置距离而改变。
教程：
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>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018.10.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
