文档章节

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

李玉珏
 李玉珏
发布于 2015/04/01 15:17
字数 388
阅读 2384
收藏 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等浏览器上,都测试通过,在一些复杂的页面环境中,包括横向滚动条,测试结果也都正确。

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

粉丝 278
博文 60
码字总数 102475
作品 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
12个常规前端面试题及小结

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

流口水流
2017/06/01
0
0
EVENT对象的属性

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

黑魔法
2016/11/24
4
0

没有更多内容

加载失败,请刷新页面

加载更多

linux学习-0919

linux和windows互传文件 用户配置文件和密码配置文件 用户组管理 用户管理 一、linux和windows互传文件 linux和windows可以互相传输文件,但是需要使用xshell 并且安装lrzsz包: yum insta...

wxy丶
26分钟前
1
0
收集几个开源的微信小程序开发框架

1、 mpvue mpvue 是美团点评开源的一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小...

哥本哈根的小哥
32分钟前
1
0
Golang CSP并发模型

今天介绍一下 go语言的并发机制以及它所使用的CSP并发模型 CSP并发模型 CSP模型是上个世纪七十年代提出的,用于描述两个独立的并发实体通过共享的通讯 channel(管道)进行通信的并发模型。 CS...

xtof
33分钟前
1
0
用chrome在电脑上模拟微信内置浏览器

先了解安卓微信和Ios微信的UA(User agent:用户代理) 安卓微信UA: mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like gecko) ve......

可达鸭眉头一皱
39分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部