02兼容offsetX

关于事件的属性

event 有几个关于位置的属性常用

1. offsetX
2. clientX
3. pageX
4. screenX
5. 其中一些兼容性有问题，但是经常要解决的是offsetX的问题
6. clientX和screenX是标准有的
7. offsetX是IE特有的

offset 兼容性方案

function getOffsetX(event) {
    var e = event || window.event
    if (e.offsetX) {
        return e.offsetX
    }else {
        var rect = obj.getBoundingClientRect();
        var clientX = e.clientX;
        return clientX - rect.left
    }
}

1. 通过测试发现

• offsetX是 点击点 相对于 元素内边框的
• clientX - rect.left是 点击点 相对于 元素外边框的（不论是否有margin）

ele.getBoundingClientRect()

1. 获得当前元素的大小和相对于视口的位置
2. offsetX还可以用另一种方式获取e.pageX - rect.left - window.pageXOffset
3. 当前窗口的滚动距离使用window.pageXOffset，更兼容

event各种位置.png