鼠标事件的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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
微信小程序图片右边加两行文字的代码
Apr 23 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP中JSON的应用技巧
2015/10/10 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
Yii框架使用PHPExcel导出Excel文件的方法分析【改进版】
2019/07/24 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
vue渲染时闪烁{{}}的问题及解决方法
2018/03/28 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
haskell实现多线程服务器实例代码
2013/11/26 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python 实现按对象传值
2019/12/26 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python爬虫Scrapy框架CrawlSpider原理及使用案例
2020/11/20 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
总经理的岗位职责
2014/02/23 职场文书
毕业生就业意向书
2014/04/01 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
三八妇女节致辞
2015/07/31 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python