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

问题描述

问 题

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

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

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

解决方案

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

这篇关于javascript - 在mousemove事件中，e.offsetX到底相对于谁呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！