event.x,event.clientX,event.offsetX区别

最新推荐文章于 2020-07-23 17:42:53 发布

转载最新推荐文章于 2020-07-23 17:42:53 发布 · 547 阅读

文章标签：

#border #function #div

javascript 同时被 2 个专栏收录

311 篇文章

订阅专栏

WEBGIS

123 篇文章

订阅专栏

本文介绍了在Web开发中鼠标事件的不同坐标系统，包括x、clientX、offsetX和screenX等属性的区别与应用场景，并通过示例代码展示了如何获取这些坐标。

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

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。

详细出处参考：http://www.jb51.net/article/4320.htm

<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100"> 
<tr><td> 
<div onclick="show()" style="background:silver;cursor:hand"> 
Click here to show.  
</div> 
</td></tr> 
</table> 
<script> 
function show(){ 
alert("window.event.x:"+window.event.x+"\nwindow.event.y:"+window.event.y+"\nevent.clientX:"+event.clientX+"\nevent.clientY:"+event.clientY+"\nevent.offsetX:"+event.offsetX+"\nevent.offsetY:"+event.offsetY+"\nwindow.event.screenX:"+window.event.screenX+"\nwindow.event.screenY:"+window.event.screenY); 
} 
</script>