在mousemove事件中，e.offsetX到底相对于谁呢？

Question

<div>
    <div></div>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
</div>

点击<li>的时候，给最外的<div>绑定mousemove事件，预期e.offsetX和e.offsetY是相对于最外的<div>左上角而言的。但是实际上，好像是相对于两个子<div>而言的。

请问e.offsetX到底是相对于什么而言的？有什么需要注意的地方吗？

Answer 1

offsetX 表示鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 表示鼠标指针位置相对于触发事件的对象的 y 坐标。
mousemove事件是冒泡的，当里面的div触发mousemove事件时会向上冒泡，当冒泡到最外层div时调用事件处理程序。任何一个事件的目标元素都是最开始触发事件的那个元素。所以event.offsetX/Y表示的是你触发mousemove事件的源对象的offsetX/Y，也就是里面的div。

Answer 2

offset[X|Y] 是相对于目标元素左上角和鼠标之间的距离；
page[X|Y] 是相对于整个页面左上角和鼠标之间的距离；

代码示例：
http://codepen.io/flybywind/pen/KzbwLM