js-offsetX、pageX、clientX、layerX、screenX

时间:2023-01-09 10:17:50

真心地我也是懵逼的

js-offsetX、pageX、clientX、layerX、screenX

 

clientX,clientY:针对屏幕有效区域,不包括滚动部分,坐标(0,0)一直在有效区域的左上角

X,Y:            针对屏幕有效区域,不包括滚动部分,坐标(0,0)一直在有效区域的左上角

offsetX,offsetY:针对屏幕有效区域,及包含滚动条部分(相对于当前元素(块或行内块));当在有效区域内时,不包括滚动条部分

pageX,pageY::   针对屏幕有效区域,及包含滚动条部分

layerX,layerY: 针对屏幕有效区域,及包含滚动条部分

screenX,screenY:可返回事件发生时鼠标指针相对于屏幕的水平坐标,不包括滚动条部分

 

效果图1:默认初始

js-offsetX、pageX、clientX、layerX、screenX

 

 

效果图2:在黑色边框div区域内鼠标乱移动时,并且页面滚动条在最顶部未向下滑动时

js-offsetX、pageX、clientX、layerX、screenX

 

 

效果图3:在黑色边框div外面鼠标乱移动时,并且页面滚动条在顶部没有向下滑动时

js-offsetX、pageX、clientX、layerX、screenX

 

 

 

 

效果图4:在黑色边框div区域内鼠标乱移动时,并且,页面向下滑动,滚动条下移

js-offsetX、pageX、clientX、layerX、screenX

 

 

 

 

 

效果图5:在黑色边框div外面鼠标乱移,页面下滑,滚动条下滑

js-offsetX、pageX、clientX、layerX、screenX