<body padding="0">
<table border=2 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>
</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
<table border=2 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>
</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
