需求：
做项目中遇到一个这样的需求，点击属性菜单节点，出现显示框，显示框的位置随着鼠标点击的位置距离而改变。
基本定义
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>
