clientX和clientY

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

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

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

####基本定义

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干货大全。

clientX和clientY相关推荐

clientX和clientY属性需要注意的地方
clientX和clientY为可视区鼠标的位置. 1. 随鼠标移动的div块[runjs] 当document有多个页面时,会出现问题.[runjs] 2. 解决方案:scrollTop, scro ...
什么?你还不知道offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别，进来唠唠
offsetX.offsetY: 鼠标相对于事件源元素的X,Y坐标.比如说,给黄色的盒子定义一个点击事件,则这个offset的坐标原点就在这个黄色盒子的左上角,offsetX.offsetY就是相对于 ...
一文看懂js中的clientX，clientY，pageX，pageY，screenX，screenY
一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们 ...
clientX，clientY，offsetY，offsetX，screenX，screenY区分
在js中clientX,clientY,offsetX,offsetY,screenX,screenY都是鼠标事件的几个对象: 如下图可知: clientX:在鼠标事件发生时,鼠标相对于浏览器位置的X ...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
offsetX.offsetY: 鼠标相对于事件源元素的X,Y坐标.比如说,我给黄色的盒子定义一个点击事件,则这个offset的坐标原点就在这个黄色盒子的左上角 clientX.clientY: 鼠标 ...
理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...
理解 e.clientX,e.clientY e.pageX
event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX ...
如何理解e.clientX和e.clientY e.screenX e.screenY
别人老是说e.clientX和e.clientY是可视区的坐标,后来我通过测试发现 e.clientX和e.clientY的坐标是你打开浏览器不是有一个方框吗? 你可以用鼠标直接点到他的最左边看它是不 ...
鼠标位置的获取pageX，pageY，screenX，screenY，clientX，和clientY，offsetX ，offsetY，layerX，layerY的使用和区别
pageX,pageY,screenX,screenY,clientX,和clientY返回一个数,其指示物理"CSS像素"的数量的点是从参考点.事件点是用户单击的位置,参考点是左 ...

clientX和clientY

clientX和clientY相关推荐

最新文章

热门文章