一、clientX:浏览器可视区域的坐标 定义:clientX是鼠标事件发生时,鼠标指针相对于浏览器可视区域(即视口)的水平坐标。它忽略了页面的滚动偏移,仅关注当前可视区域内的位置。 应用场景:clientX常用于计算鼠标在可视区域内的具体位置,如实现拖拽功能时,需要实时更新鼠标位置以调整拖拽元素的位置。 特点:clientX的值不受页面...
图2中粉色DIV设置了position为relative,所以此时layerX/Y的原点为粉色DIV的左上角。 pageX/Y、clientX/Y区分 当可视窗口与文档窗口重叠,pageX等于clientX, pageY等于clientY。 但是如果缩小浏览器窗口直到浏览器出现滚动条。此时可视窗口左上角位置不变,但文档窗口左上角位置发生变化。 如图2所示,此时文档窗口的原点如...
screenY:鼠标点击位置相对于电脑屏幕左上角的垂直偏移量 2、clientX和clientY 参照点:浏览器内容区域左上角 clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离) clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离) 3、pageX和pageY 参照点:网页的左上角 ...
clientX和 clientY 是可视区域的 x,y的坐标, 以浏览器左上角的x,y为起点为坐标系计算 image.png image.png offsetX、offsetY 事件触发相对于当前元素自身的位置的x,y坐标 image.png screenX、screenY 距离当前电脑屏幕的x,y坐标 (屏幕分辨率的宽度计算) image.png pageX、pageY 是相对于整个页面来说,包括了...
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移而变化. 二.screenX screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议 三.offsetX和layerX offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域...
clientX是鼠标相对以浏览器有效区域的的X轴坐标, clientY是鼠标相对以浏览器有效区域的的Y轴坐标, 上图中我的鼠标在浏览器有效区域里 的x坐标是200px,y坐标是0;而screenX,screenY则是相对以整个显示屏幕区域而言的。 上图中 相对于“整个显示屏幕区域而言” 鼠标的x坐标是200px,y坐标是85px,所以screenX和scree...
clientX和clientY与x,y一样的,以浏览器显示区域的左上角开始,指鼠标的坐标。x,y是新浏览器支持 offsetX,offsetY,针对目标元素的左上角坐标,从padding开始。 layerX,layerY,往上找有定位属性的父元素的左上角(自身有定位属性的话就是相对于自身),都没有的话,就是相对于body的左上角 ...
一、clientX、clientY 点击位置距离当前body可视区域的x,y坐标 二、pageX、pageY 对于整个页面来说,包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x,y坐标 五、x、y(图中标注的不标准 感谢追风programer发现了这个问题 ...
clientX,pageX,screenX,offsetX 一、clientX、clientY 点击位置距离当前body可视区域的x,y坐标 二、pageX、pageY 对于整个页面来说,包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x,y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x,y坐标...
在JavaScript中，鼠标事件对象的几个属性event.x, event.clientX, event.offsetX以及screenX各有其特定的含义和用途。event.x表示鼠标相对于目标事件父元素的外边界在x坐标上的位置，反映的是事件发生时鼠标位置的绝对值。clientX则表示鼠标相对于浏览器客户区域的x坐标，忽略了滚动条，只考虑正文区域内的...