IE中clientX,offsetX,X,screenX的区别

最新推荐文章于 2020-06-03 01:09:49 发布

weixin_30275415

最新推荐文章于 2020-06-03 01:09:49 发布

阅读量93

点赞数

原文链接：http://www.cnblogs.com/acis_/archive/2009/09/06/1561156.html

版权

<body padding="0">
<table border=2 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100;">
<tr><td>
<div οnclick="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>
</body>

所有的点都是:
1. 针对当前鼠标点击的点的位置到某部分的距离
2. clientX: 鼠标当前点击位置到窗口可视区域0的距离, screenX也是一样
    X:鼠标当前点击位置到参考元素(父元素)边框距离, 如果是TD相对Table则有
            左cellpadding + 左cellspacing + border + cellpading与cellspacing间隙(一竖线,1px) + 鼠标当前位置到左padding距离
    OffsetX:鼠标当前点击位置到参考元素(父元素)padding处的距离(纯距离),什么都不包括,只有:
             左padding距离 + 鼠标当前位置

上面的说法只针对在table中,而在Div中X和offsetX,只差别于X包括左边框距离,而offsetX没包括左边框距离
offsetX: 自身padding-left + margin-left + border, 父padding-left
X:自身padding-left + margin-left + border, 父padding-left + border

转载于:https://www.cnblogs.com/acis_/archive/2009/09/06/1561156.html