鼠标事件的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 构造函数 实例分析
Nov 26 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
来自国外的30个基于jquery的Web下拉菜单
Jun 22 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
Sep 25 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
跟我学习javascript的异步脚本加载
Nov 20 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
jquery 年会抽奖程序
2011/12/22 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
10个Python小技巧你值得拥有
2018/09/29 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
python Tensor和Array对比分析
2020/01/08 Python
python实现udp聊天窗口
2020/03/31 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
工程造价与管理专业应届生求职信
2013/11/23 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android