关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

            关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

offsetX、offsetY: 鼠标相对于事件源元素(srcElement)的X,Y坐标

clientX、clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。

pageX、pagey: 类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没 有这2个属性

screenX、screenY: 鼠标相对于用户显示器屏幕左上角的X,Y坐标。

原文地址:https://www.cnblogs.com/wangfencs/p/9721393.html

时间: 2024-08-23 23:05:31

关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别的相关文章

关于offsetX,clientX,pageX,offsetHeight,clientHeight ,scrollHeightX的区别

一.关于offsetX,clientX,pageX,scrollX的区别 offsetX表示点击点到所点击物体左边距的距离: clientX表示点击点到浏览器左边的距离,该点击点会随着滚动条的移动而发生变化: pageX表示点击点到浏览器左边的距离,但点击点不会因滚动条的移动而变化: scrollX表示点击点到屏幕左边的距离 二.关于offsetHeight,clientHeight ,scrollHeight的区别 clientHeight:内容可视区域的高度,也就是说页面浏览器中可以看到内容

这样理解比较好吧(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)

1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X,Y坐标,和page 不同的是计算区域不包括窗口自身的控件和滚动条. 3 event.X和event.Y:相对于当前窗口,设置或获取鼠标指针位置相对于父文档的x,y像素坐标(可惜火狐不支持,人生总要有些遗憾也是没办法的). 4 scrollX,scrollY:望文生义,相对于浏览器而言的,随滚动条移

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <st

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

简介 关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种: event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持

clientX/Y pageX/Y offsetX/Y layerX/Y screenX/Y

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持 off

如何使用Vue实现拖拽效果pageY、screenY、clientY、layerY、offsetY(转)

如何使用Vue实现拖拽效果pageY.screenY.clientY.layerY.offsetY 2018年06月28日 17:34:42 唐策 阅读数:377 标签: 如何使用Vue实现拖拽效果pageY.screenY.cli 更多 个人分类: vue-js 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_29132907/article/details/80846652 1.效果图 2.分清clientY pageY screenY

JS之clientX,clientY,screenX,screenY,offsetX,offsetY

clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置: clientY:当鼠标事件发生时,鼠标相对于浏览器(这里说的是浏览器的有效区域)y轴的位置: screenX:当鼠标事件发生时,鼠标相对于显示器屏幕x轴的位置: screenY:当鼠标事件发生时,鼠标相对于显示器屏幕y轴的位置: offsetX:当鼠标事件发生时,鼠标相对于事件源x轴的位置 offsetY:当鼠标事件发生时,鼠标

offsetX、clientX、screenX、pageX、layerX

pageX/Y 相对于文档窗口左上角 offsetX/Y 相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值. (测试了IE11.Opera54.0.2952.71.Chrome68.0.3423.2.Firefox61.0.2中offset均不含边框的宽度) clientX/Y 相对于可视窗口左上角 screenX/Y 相对于屏幕左上角 layerX/Y 相对于position为absolute或relative的父元素的左上角 pa

clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 详解

clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持 offsetX/Y: offsetX/Y获取到是触发点相对被触发dom的左上角距离,不过左上角基准点在不同浏览器中有区别,其中在IE中以内容区左上角为基准点不包括边框,如果触发点在边框上会返回负值,而chrome中以边框左