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

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

weixin_30868855

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

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hr2014/p/3779320.html

本文详细解释了不同鼠标事件坐标系的概念，包括x、clientX、offsetX和screenX等，并通过示例代码展示了这些坐标的具体应用。

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

演示代码：

<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>

转载于:https://www.cnblogs.com/hr2014/p/3779320.html