javascript坐标：event.x、event.clientX、event.offsetX、event.screenX

最新推荐文章于 2023-06-28 13:49:52 发布

原创最新推荐文章于 2023-06-28 13:49:52 发布 · 349 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #文档 #工作

编程技术专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了鼠标事件中各种坐标系的概念及其应用场景，包括clientX/clientY用于获取相对于浏览器客户区域的坐标，offsetX/offsetY则针对触发事件元素的位置进行测量，screenX/screenY提供屏幕坐标，以及x/y属性对于父文档的相对位置。

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标，event.X也一样。但是如果设置事件对象的定位属性值为relative，event.clientX不变，而event.X返回事件对象的相对于本体的坐标。

><script>
var strInfo="";
strInfo+="\r\n网页可见区域宽:"+document.body.clientWidth;
strInfo+="\r\n网页可见区域高:"+document.body.clientHeight;
strInfo+="\r\n网页可见区域宽:"+document.body.offsetWidth+"(包括边线的宽)";
strInfo+="\r\n网页可见区域高:"+document.body.offsetHeight+"(包括边线的宽)";
strInfo+="\r\n网页正文全文宽:"+document.body.scrollWidth;
strInfo+="\r\n网页正文全文高:"+document.body.scrollHeight;
strInfo+="\r\n网页被卷去的高:"+document.body.scrollTop;
strInfo+="\r\n网页被卷去的左:"+document.body.scrollLeft;
strInfo+="\r\n网页正文部分上:"+window.screenTop;
strInfo+="\r\n网页正文部分左:"+window.screenLeft;
strInfo+="\r\n屏幕分辨率的高:"+window.screen.height;
strInfo+="\r\n屏幕分辨率的宽:"+window.screen.width;
strInfo+="\r\n屏幕可用工作区高度:"+window.screen.availHeight;
strInfo+="\r\n屏幕可用工作区宽度:"+window.screen.availWidth;
window.confirm(strInfo);
</script>