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

Question

<p>
    <p></p>
    <p>
        <ul>
            <li></li>
        </ul>
    </p>
</p>

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

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

Answer 1

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

Answer 2

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

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