鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解


Posted in Javascript onMarch 12, 2015

鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

screenY

         鼠标相对于显示器屏幕左上角的偏移

pageY

         鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响)

         IE9之下并不支持这个属性

         但是可以写点代码计算出来。 jQuery中的实现:

 // Calculate pageX/Y if missing and clientX/Y available

 if ( event.pageX == null && original.clientX != null ) {

     eventDoc = event.target.ownerDocument || document;

     doc = eventDoc.documentElement;

     body = eventDoc.body;

     event.pageX = original.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );

     event.pageY = original.clientY + ( doc && doc.scrollTop  || body && body.scrollTop  || 0 ) - ( doc && doc.clientTop  || body && body.clientTop  || 0 );

 }   

简单点实现就是。 

鼠标相对于浏览器视口的偏移加上文档的滚动条隐藏的高度减去文档的clientTop.

var pageY = event.clientY +document.documentElement. scrollTop-document.documentElement.clientTop

为何要减去document.documentElement.clientTop

这是IE8之下浏览器特有的文档的偏移,即使设置html,body的padding和margin为0也不会影响其值。

在iE7下测试,得到                              

 document.documentElement.clientTop --> 2px  document.documentElement.clientLeft --> 2px

 document.bocy.clientTop --> 0px  document.body.clientLeft --> 0px

clientY

         鼠标相对于浏览器视口左上角的偏移

         注意clientY和pageY的区别,clientY在页面无滚动条的情况下值等同于pageY

----------------------------------分割-----------------------------------------------

layerY

         如果元素的position样式不是默认的static,我们说这个元素具有定位属性。

         在当前触发鼠标事件的元素和它的祖先元素中找到最近的具有定位属性的元素,计算鼠标与其的偏移值,以找到元素的border的左上角的外交点作为相对点。如果找不到具有定位属性的元素,那么就相对于当前页面计算偏移,此时等同于pageY。

鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

         IE9之下并不支持这个属性,但是可以用其特有的offsetY替换

offsetY  

 

  IE专有的属性

         offsetY和layerY的不同在于,前者的在计算偏移值时,相对于元素的border左上角的内交点,因此当鼠标位于元素的border上时,偏移值是一个负值。 另外offsetY并不在乎触发事件的元素是否有定位属性,它总是相对于触发事件的元素来计算偏移值。

鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

   鉴于layerY和offsetY的不同,要兼容的使用二者要注意

        

1.触发事件的元素一定要设置定位属性。

       

2.在元素具有上边框border-top的情况下, layerY比offsetY的值多一个border-top的宽度值。

 //这里的element.borderTopWidth必须是实际计算出的元素的上边框宽度。

 var borderTopWidth =  window.getComputedStyle ? window.getComputedStyle(element,null).borderTopWidth: element.currentStyle.borderTopWidth; 

 var offsetY = event.offsetY||(event.layerY + borderTopWidth);

通过layerY和offsetY属性,可以很方便的计算鼠标相对于绑定鼠标事件元素的偏移,这在某些时候非常有用。   

这里详细说了鼠标竖直方向的偏移属性,水平方向的偏移类似,不再讨论。

以上就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
老鱼 浅谈javascript面向对象编程
Mar 04 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
Bootstrap如何激活导航状态
Mar 22 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 Javascript
QT与javascript交互数据的实现
May 26 Javascript
JavaScript中return false的用法
Mar 12 #Javascript
JavaScript中神奇的call()方法
Mar 12 #Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 #Javascript
JavaScript中定义函数的三种方法
Mar 12 #Javascript
javascript实时显示北京时间的方法
Mar 12 #Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 #Javascript
JavaScript数据结构与算法之栈详解
Mar 12 #Javascript
You might like
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
php验证码实现代码(3种)
2015/09/07 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
Document 对象的常用方法
2009/07/31 Javascript
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
Python subprocess模块详细解读
2018/01/29 Python
python模糊图片过滤的方法
2018/12/14 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
会计实习生工作总结的自我评价
2013/10/07 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
军训自我鉴定200字
2014/02/13 职场文书
施工质量承诺书范文
2014/05/30 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2014年工会工作总结
2014/11/12 职场文书
旷课检讨书
2015/01/26 职场文书
学校节水倡议书
2015/04/29 职场文书
公司仓库管理制度
2015/08/04 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python