鼠标事件的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 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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 addslashes 函数详细分析说明
2009/06/23 PHP
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
Python实现获取操作系统版本信息方法
2015/04/08 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
欧克利英国官网:Oakley英国
2019/08/24 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
影子教师研修方案
2014/06/14 职场文书
国庆节活动总结
2014/08/26 职场文书
大雁塔导游词
2015/02/04 职场文书
2015年客房服务员工作总结
2015/05/15 职场文书
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers