浏览器兼容的获取event.offsetX的最简单方法
浏览器兼容的获取event.offsetX的最简单方法
李玉珏 发表于3年前
浏览器兼容的获取event.offsetX的最简单方法
  • 发表于 3年前
  • 阅读 2318
  • 收藏 2
  • 点赞 0
  • 评论 1

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 很多时候,我们都需要获取event.offsetX数值,但是Firefox不支持offsetX属性,经过研究,本文将提供一个最简单的方法,解决该问题。

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

共有 人打赏支持
李玉珏
粉丝 206
博文 45
码字总数 66993
评论 (1)
李玉珏
offsetX属性在Firefox39.0版本之后已经提供。
×
李玉珏
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: