正确使用pageX、pageY、offsetLeft、offsetTop

获取鼠标位置的时候，遇到一点疑问，然后验证了一下自己的疑惑；

pageX、pageY跟clientX和clientY类似，是相对于浏览器文档的坐标；

offsetLeft、offsetTop获取的是固定定位，也就是说，监听某个选择器内的鼠标位置，这个方法返回的是这个固定范围的左上角离页面左上角的距离坐标；

下面利用一个简单的div来演示一下

div{width: 100px;height: 100px;border: 1px solid red;margin: 200px 200px;}

对应的我们想要获取一下当前div元素的上述四个属性值：

document.querySelector('div').onmousemove = (e) => {const x = e.pageX;const y = e.pageY;const x1 = e.target.offsetLeft;const y1 = e.target.offsetTop;console.log('x='+x);console.log('y='+y);console.log('x1='+x1);console.log('y1='+y1);
}

针对验证我们就可以在页面的控制台看一下，所得到的值；

当我把鼠标放在div元素的左上角顶点时：

然后当我把鼠标放在div内部时：

其实结合使用这两个方法，可以得到当前鼠标的位置与包裹元素侧边的距离，对于有些应用会很有帮助；

正确使用pageX、pageY、offsetLeft、offsetTop相关推荐

pageX,clientX,offsetLeft,scrollLeft的区别
pageX,clientX,offsetLeft,scrollLeft的区别 1.pageX / pageY pageX / pageY的值为鼠标相对于document的距离,即网页左上角的位置 2. ...
页面上pageX、offsetLeft等的使用方法
页面上pageX.offsetLeft等的使用方法 pageX: 页面X坐标位置 pageY: 页面Y坐标位置 <script>window.onmousemove=function(e) ...
pageX/pageY、clientX/clientY、screenX/screenY的区别
在触发鼠标事件的时候会传一个event参数,在这个参数中我们可以获得pageX/pageY.clientX/clientY.screenX/screenY,但是这几个属性有啥区别呢?看下图 scree ...
对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解
如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop 在刚开始使用的时候总是不能理解这四个有什么不一样,用在哪里,因为这几个词真的太像了,emmm,总 ...
JavaScript中pageX pageY offsetX offsetY区别
IE下没有pageX,pageY这两个属性 pageX pageY:鼠标指针的位置,文档的坐标. offsetX offsetY:鼠标相对于事件源元素的x,y坐标
理清offsetparent()、offsetLeft/offsetTop、offset()、position()
简而言之,它们的概念如下: ① offsetparent() 指的是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素. ② offsetLeft/offsetTop ...
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
clientX, clientY | offsetX, offsetY | pageX, pageY的区别: ✍ clientX, clientY:指的是鼠标点击位置距离可视窗口的坐标: 图示:在不拉 ...
window的pageX,pageY,screenX,sreenY,clientX,clientY的区别描述
pageX,pageY,screenX,screenY,clientX,和clientY返回一个数,其指示物理"CSS像素"的数量的点是从参考点.事件点是用户单击的位置,参考点是左 ...
HTMLElement属性：offsetParent,offsetLeft,offsetTop
HTMLElement.offsetParent - Web API 接口参考 | MDN HTMLElement.offsetParent 是一个只读属性,返回一个指向最近的(指包含层级上的最近)包 ...

正确使用pageX、pageY、offsetLeft、offsetTop

正确使用pageX、pageY、offsetLeft、offsetTop相关推荐

最新文章

热门文章