文档章节

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

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

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

粉丝 318
博文 66
码字总数 110992
作品 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
全面兼容IE6/IE7/IE8/FF的CSS HACK写法

CSS hack由于不同的浏览器,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不...

^6^|^6^
2011/12/06
0
0
12个常规前端面试题及小结

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

流口水流
2017/06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
7
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
2
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部