鼠标事件的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 相关文章推荐
动态添加js事件实现代码
Mar 12 Javascript
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
页面实时更新时间的JS实例代码
Dec 18 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
node.js 如何监视文件变化
Sep 01 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
实用函数7
2007/11/08 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
python实现指定字符串补全空格的方法
2015/04/30 Python
windows系统下Python环境搭建教程
2017/03/28 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python socket处理client连接过程解析
2020/03/18 Python
Jupyter Notebook 文件默认目录的查看以及更改步骤
2020/04/14 Python
基于python实现删除指定文件类型
2020/07/21 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
详解python的super()的作用和原理
2020/10/29 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
杭州-DOTNET笔试题集
2013/09/25 面试题
建筑安全员岗位职责
2014/03/13 职场文书
学生逃课检讨书
2015/02/17 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技