event.clientX、clientY、x、y、offsetX、offsetY、screenX、区别

最新推荐文章于 2024-11-12 08:18:23 发布

mememama111

最新推荐文章于 2024-11-12 08:18:23 发布

阅读量246

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/mememama111/article/details/84400160

js 专栏收录该内容

6 篇文章

订阅专栏

本文深入解析了JavaScript中坐标获取的原理与应用，通过实例展示了window.event对象中关键属性的含义，包括clientX、clientY、offsetX、offsetY、screenX、screenY等，帮助开发者准确理解并运用这些坐标值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Javascript中，坐标的获取让人头晕，下面这段代码较好地演示了上述各个参数的含义：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 坐标位置</TITLE>
<style>
*{
margin:0}
#d1{
position:absolute;
left:50px;
top:50px;
border:1px blue solid;
}

</style>
</HEAD>

<SCRIPT>
function dullwolf() {
if (!document.all)
 var evt=arguments[0];
else
 var evt=event;
p1.innerText=window.event.x;
p2.innerText=window.event.y;
p3.innerText=window.event.clientX;
p4.innerText=window.event.clientY;
p5.innerText=window.event.offsetX;
p6.innerText=window.event.offsetY;
p7.innerText=window.event.screenX;
p8.innerText=window.event.screenY;
}

</SCRIPT>
<body onmousemove="dullwolf();">
<div id="d1">
event.x= ;
event.y= ;
clientX= ;
clientY= ; 
offsetX= ;
offsetY= ;
screenX= ;
screenY= ;
test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 test
 </div>
</body>