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

为什么80%的码农都做不了架构师？>>>   

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

转载于:https://my.oschina.net/liyuj/blog/394692