文档章节

浏览器兼容的获取event.offsetX的最简单方法

李玉珏
 李玉珏
发布于 2015/04/01 15:17
字数 388
阅读 2394
收藏 2

        很多时候,我们都需要获取event.offsetX数值,但是Firefox的event不支持offsetX属性,这给我们造成了一定的困难,虽然Firefox提供了一个layerX属性,但是该属性需要和CSS的position属性配合才能获取我们想要的数值,这是个比较大的局限,他限制了页面样式的设计,而且,layerX的数值严格意义上并不等同于offsetX,offsetX是相对于元素的内边距,而layerX是相对于外边距,这时如果边框较宽,两者取值会有误差,或者说,需要减去边框的宽度。

        在网上经过搜索,大部分的方案都是通过offsetParent逐级计算,或者利用jQuery的$(e.target).offset().left进行计算,要么无法适应有滚动条的情况,要么依赖第三方库,有没有更简单的办法呢?

        经过研究,找到了如下的计算方法,非常简单:

function getOffsetX(event){
    var evt =event||window.event;
    var srcObj = evt.target || evt.srcElement;
    if (evt.offsetX){
        return evt.offsetX;
    }else{
        var rect = srcObj.getBoundingClientRect();
        var clientx = evt.clientX;
        return clientx - rect.left;
    }
}

    或者用一行代码:

return evt.offsetX || (evt.clientX - srcObj.getBoundingClientRect().left);

        这个计算方法,在IE8以上,Firefox、Chrome等浏览器上,都测试通过,在一些复杂的页面环境中,包括横向滚动条,测试结果也都正确。

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

粉丝 298
博文 63
码字总数 106838
作品 0
沈阳
技术主管
私信 提问
加载中

评论(1)

李玉珏
李玉珏
offsetX属性在Firefox39.0版本之后已经提供。
关于JS、JQ获取可视区域的高度、宽度以及屏幕分辨率的那些事

用JS和JQ获取相关属性 JavaScript document.body.clientWidth;//网页可见区域宽 document.body.clientHeight;//网页可见区域高 document.body.offsetWidth;//网页可见区域宽(包括边框的宽)...

胡洋
2017/03/10
0
0
java的http连接中,如何改变User-Agent

java 的 URLConnection能够方便我们获取internet/intranet上的资源。而HttpUrlConnection 则是特别为我们连接http服务器,上传数据,下载文件而设计的;HttpUrlConnection会为我们组织正确的...

穆哥哥
2013/07/10
0
1
让人“蛋碎”的ie兼容问题

前段时间的一个项目,要做ie8及以上的兼容,那个做的我真的是蛋疼,菊花紧啊。。。。 当时就想问问微软ie的部门,你们到底想干虾米,这不是要逼死前段工程师吗。。。。 然后去Google上面找了...

i5--lou
2016/03/08
75
2
EVENT对象的属性

1、鼠标事件: ·相对于浏览器位置: event.clientX:事件触发时,鼠标指针向对于浏览器页面(客户区)的水平坐标; event.clientY:事件触发时,鼠标指针向对于浏览器页面(客户区)的垂直坐标...

黑魔法
2016/11/24
4
0
12个常规前端面试题及小结

本文首发于我的个人博客:刘星的博客 这是昨天对一个新来有两月妹纸的一个小测试,总体来说都很简单常规,但结果有点儿不理想,今天把它总结总结记下来。12个常规面试题,包含了html,css,ja...

流口水流
2017/06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Win10:默认的图片打开应用,打开图片时速度明显很慢的解决办法

首先,我们随便地打开一张图片。然后,点击右上角的三个小点,最后点击弹出菜单最下面的“设置”。如下图: 在“设置”中找到下面的“人物”,把它关掉就好了。 原来,默认情况下,Win 10的图...

LivingInFHL
39分钟前
2
0
js代码激发onchange事件,兼容谷歌火狐IE

var el = document.getElementsByName('role')[0]; el.value = '3'; var evt = document.createEvent("HTMLEvents"); evt.initEvent("change", false, true); el.dispatchEvent(evt);......

我退而结网
54分钟前
3
0
mysql客户端报错:libmysqlclient_16 not defined in file libmysqlclient.so.16

报错情况: 安装完mydumper之后(上一篇文章),登陆Mysql客户端报错:version libmysqlclient_16 not defined in file libmysqlclient.so.16 with link time reference 同样:mysql的其他客...

machogyb
今天
1
0
MySQL 数据库中间件 安装部署测试全过程

1、环境准备 1.1、操作系统环境 [root@MyCat conf]# uname -aLinux MyCat 2.6.32-431.el6.x86_64 #1 SMP Sun Nov 10 22:19:54 EST 2013 x86_64 x86_64 x86_64 GNU/Linux 1.2、关闭SELIN......

PeakFang-BOK
今天
6
0
Linux Mysql 安装

https://www.cnblogs.com/xinjing-jingxin/p/8025805.html

流氓兔-
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部