js clientx 和pagex的区别

JavaScript013

js clientx 和pagex的区别,第1张

pageX, pageY, x, y, clientX, clientY

pageX, pageY是相对于文档窗口的左上角,x,y和clientX, clientY相同,其值是相对于可视窗口(浏览的可视区域)的左上角。如下图。

此时可视窗口与文档窗口重叠,pageX等于clientX, pageY等于clientY, 如果我们缩小浏览器窗口直到浏览器出现滚动条。此时可视窗口左上角位置不变,但文档窗口左上角位置发生的变化,如下图:

由此我们可以看出当浏览器没有滚动条时(可视窗口与文档窗口重合),pageX与clientX相等,pageX与clientY相等,如果出现下拉滚动条并向下拉动滚动条,文档窗口向上滚动,如果出现左右滑动的滚动条并向右拉动滚动条,文档窗口向左滚动,在文档窗口滚动的情况下,pageX>=clientX, pageY>=clientY, x = clientX, y = clientY,

1. 针对当前鼠标点击的点的位置到某部分的距离

2. clientX: 鼠标当前点击位置到窗口可视区域0的距离, screenX也是一样

X:鼠标当前点击位置到参考元素(父元素)边框距离, 如果是TD相对Table则有

左cellpadding + 左cellspacing + border + cellpading与cellspacing间隙(一竖线,1px) + 鼠标当前位置到左padding距离

OffsetX:鼠标当前点击位置到参考元素(父元素)padding处的距离(纯距离),什么都不包括,只有:

左padding距离 + 鼠标当前位置

这个事是鼠标相关事件,比如click、mousemove发生时,鼠标的位置信息。

clientX与clientY、分别是鼠标相对于浏览器内容窗口左边和上边的偏移像素数值。