clientX、pageX、screenX以及offsetX区别

clientX、pageX、clientX以及offsetX区别

client系列(不包含滚动条)

clientX:鼠标相对于浏览器窗口可视区域x方向坐标
clientY:鼠标相对于浏览器窗口可视区域y方向坐标

page系列(包含滚动条)

pageX:鼠标相对于页面x方向坐标(页面包括被滚动条卷去的部分)
pageY:鼠标相对于页面y方向坐标(页面包括被滚动条卷去的部分)

screen系列

screenX:鼠标相对于电脑屏幕x方向坐标
screenY:鼠标相对于电脑屏幕y方向坐标

offset系列

offsetX:鼠标相对于事件源元素的x坐标
offsetY:鼠标相对于事件源元素的Y坐标

layer系列(包含滚动条)

鼠标相对于当前坐标系的定位,即如果触发鼠标事件元素未设置绝对定位或者相对定位,则相对于文档的定位坐标。如果触发元素设置了绝对定位或者相对定位,则返回相对于触发元素的定位坐标
如果触发元素有定位:
layerX = offsetX, layerY = offsetY
如果触发元素没有定位:
layerX = pageX,layerY = pageY

示意图

clientX、pageX、screenX以及offsetX区别_第1张图片

你可能感兴趣的:(前端,前端,javascript,html)