文档章节

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

李玉珏
 李玉珏
发布于 2015/04/01 15:17
字数 388
阅读 2350
收藏 2
点赞 0
评论 1

        很多时候,我们都需要获取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等浏览器上,都测试通过,在一些复杂的页面环境中,包括横向滚动条,测试结果也都正确。

© 著作权归作者所有

共有 人打赏支持
李玉珏

李玉珏

粉丝 262
博文 57
码字总数 92143
作品 0
沈阳
技术主管
加载中

评论(1)

李玉珏
李玉珏
offsetX属性在Firefox39.0版本之后已经提供。
java的http连接中,如何改变User-Agent

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

穆哥哥 ⋅ 2013/07/10 ⋅ 1

让人“蛋碎”的ie兼容问题

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

i5--lou ⋅ 2016/03/08 ⋅ 2

12个常规前端面试题及小结

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

流口水流 ⋅ 2017/06/01 ⋅ 0

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

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

^6^|^6^ ⋅ 2011/12/06 ⋅ 0

EVENT对象的属性

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

黑魔法 ⋅ 2016/11/24 ⋅ 0

webCoder/jsModern

jsModern 组件扩展工具库 这是一套完全基于 jQuery 的网页组件扩展工具库,它可以完美兼容桌面端主流的现代高级浏览器,大部分功能还提供了对移动端浏览器的支持。其内部包含了多个在前端开发...

webCoder ⋅ 2017/12/11 ⋅ 0

半深入了解float与inline-block

首先是兼容性 float的话完全不用担心什么浏览器都能兼容,是一个比较老的属性了. inline-block则在IE8以上(包括8)才能使用,查了下资料,其实IE5.5的时候就已经有inline-block了,只是实现不一样...

L3ve ⋅ 2014/12/04 ⋅ 0

getPara("usr") 获取页面传参时,在360浏览器兼容模式无法获取值

@JFinal 你好,想跟你请教个问题:目前遇到一个致命问题,使用360浏览器(兼容模式)访问页面时,使用类似方法getPara("")无法获取参数值, 360安全浏览器8版本:8.1.1.230内核版本:45.0.24...

overtake ⋅ 2017/07/07 ⋅ 2

JS获取屏幕,浏览器,网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offse...

kisshua ⋅ 2012/05/29 ⋅ 0

JS原生系列-DOM篇(扩展)

继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍: 3.最后做几个网页实例! 4.ajax的介绍:ajax输出json格式文件 js...

透笔度 ⋅ 2015/08/08 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

服务网关过滤器

过滤器作用 我们的微服务应用提供的接口就可以通过统一的API网关入口被客户端访问到了。但是,每个客户端用户请求微服务应用提供的接口时,它们的访问权限往往都需要有一定的限制,系统并不会...

明理萝 ⋅ 9分钟前 ⋅ 1

【2018.06.21学习笔记】【linux高级知识 14.1-14.3】

14.1 NFS介绍 14.2 NFS服务端安装配置 14.3 NFS配置选项

lgsxp ⋅ 17分钟前 ⋅ 0

Day18 vim编辑模式、命令模式与练习

编辑模式 命令模式 :nohl 不高亮显示 :x与:wq类似,如果在更改文件之后操作,两者效果一样;如果打开文件,没有任何操作; :wq会更改mtime,但是:x不会。 练习题 扩展 vim的特殊用法 ht...

杉下 ⋅ 21分钟前 ⋅ 0

Enum、EnumMap、EnumSet

1、Enum 不带参数 public enum Car { AUDI { @Override public int getPrice() { return 25000; } }, MERCEDES { ......

职业搬砖20年 ⋅ 22分钟前 ⋅ 0

Java中的锁使用与实现

1.Lock接口 锁是用来控制多个线程访问共享资源的方式,一般来说,一个锁能够防止多个线程同时访问共享资源。 在Lock出现之前,java程序是靠synchronized关键字实现锁功能的,而Java SE5之后,...

ZH-JSON ⋅ 23分钟前 ⋅ 0

线程组和 ThreadLocal

前言 在上面文章中,我们从源码的角度上解析了一下线程池,并且从其 execute 方法开始把线程池中的相关执行流程过了一遍。那么接下来,我们来看一个新的关于线程的知识点:线程组。 线程组 ...

猴亮屏 ⋅ 24分钟前 ⋅ 0

相对路径和绝对路径

基本概念   文件路径就是文件在电脑中的位置,表示文件路径的方式有两种,相对路径和绝对路径。在网页设计中通过路径可以表示链接,插入图像、Flash、CSS文件的位置。   物理路径:物理路...

临江仙卜算子 ⋅ 28分钟前 ⋅ 0

消息队列属性及常见消息队列介绍

什么是消息队列? 消息队列是在消息的传输过程中保存消息的容器,用于接收消息并以文件的方式存储,一个队列的消息可以同时被多个消息消费者消费。分布式消息服务DMS则是分布式的队列系统,消...

中间件小哥 ⋅ 30分钟前 ⋅ 0

java程序员使用web3j进行以太坊开发详解

如何使用web3j为Java应用或Android App增加以太坊区块链支持,教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建、钱包创建、交易转账,交易与状态、智能合约开发与交互、过滤器...

笔阁 ⋅ 31分钟前 ⋅ 0

vim编辑模式、vim命令模式

vim编辑模式 使用vim filename 进入的界面是一般模式,在这个模式下虽然我们能够查看,复制,剪切,粘贴,但是不能编辑新的内容,如何能直接写入东西呢?这就需要进入编辑模式了,从一般模式...

李超小牛子 ⋅ 33分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部