鼠标事件的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 相关文章推荐
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
javascript数组去重小结
Mar 07 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
JavaScript常用工具函数大全
May 06 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 echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
Windows下python3.7安装教程
2018/07/31 Python
如何真正的了解python装饰器
2020/08/14 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
财务工作疏忽检讨书
2014/09/11 职场文书
培训心得体会怎么写
2016/01/25 职场文书