screenX/Y、clientX/Y和pageX/Y之间有什么区别?

screenX/YclientX/YpageX/Y之间有什么区别

同样对于iPad Safari,计算结果是否与桌面上的计算结果相似,或者由于视口的不同而有所不同

如果你能给我举个例子就好了

下面的图片解释了pageYclientY之间的区别

分别适用于pageXclientX


pageX/Y坐标相对于整个渲染页面的左上角(包括通过滚动隐藏的部分)

clientX/Y坐标是相对于页面可见部分的左上角的;见;通过浏览器窗口

见演示

或者尝试以下代码片段:

document.addEventListener('DOMContentLoaded',_=&gt{
const info=document.getElementById('info');
const updateInfo=事件=&gt{
const{clientX,clientY,pageX,pageY}=event;
info.innerHTML=`clientX:${clientX}clientY:${clientY}<br/>pageX:${pageX}pageY:${pageY}`;
};
文档。addEventListener('mouseover',updateInfo);
document.addEventListener('mousemove',updateInfo);
});
正文{
边框:1px纯红;
最小高度:10000px;
利润率:10px;
}
#信息{
边框:1px纯蓝色;
位置:固定;
顶部:80px;
左:40px;
}
<h3>移动鼠标并滚动查看clientX/Y和pageX/Y的值&lt/h3>
<div id=“info”&gt&lt/部门&gt

注意:您可能永远不需要screenX/Y

发表评论