在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=<span id="p1"> </span>;
event.y=<span id="p2"> </span>;
clientX=<span id="p3"> </span> ;
clientY=<span id="p4"> </span> ; <br>
offsetX=<span id="p5"> </span> ;
offsetY=<span id="p6"> </span> ;
screenX=<span id="p7"> </span> ;
screenY=<span id="p8"> </span>;
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</body>
</HTML>
clientX与clientY、x与y：鼠标相对于浏览器内容窗口左上角的偏移量。
offsetX与offsetY：在蓝色框内，鼠标相对于蓝色框左上角的偏移量。若移出蓝色框，则是与上面的值接近的数据。（？为什么不是相等？少了2px)。
screenX与screenY：鼠标相对于显示器左上角的偏移量，也许屏幕上同时打开的有其它的应用程序。
但是x与clientX有何区别？还不清楚。
scrollLeft：当网页宽度超出屏幕宽度，并向右滚动了部分网页时，该值表示网页左边被卷去的宽度。
scrollTop：同上，网页上部被卷去的高度。
所以，若网页有被滚动(有滚动条且进行了滚动)，则此时鼠标的坐标应为：
x=event.clientX+document.body.scrollLeft;
y=event.clientY+document.body.scrollTop;
相关推荐
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
在处理鼠标事件时，我们常常会遇到`event.X`和`event.clientX`这两个属性，它们都是用来获取鼠标位置的，但有微妙的差别。 `event.clientX`属性返回的是鼠标指针在浏览器的可视窗口（客户区域）内的X坐标，不包括...
理解这些属性之间的差异至关重要，例如，`event.clientX` 和 `event.clientY` 是相对于窗口的，而`event.pageX` 和 `event.pageY` 则是相对于整个文档的。`event.offsetX` 和 `event.offsetY` 是相对于元素的可见...
JavaScript之Event详解 Event对象是JavaScript中一个非常重要的概念，它代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。Event对象只在事件发生的过程中才有效。Event的某些属性只对...
JavaScript 之 event大全 _event 对象是 JavaScript 中的一个重要概念，它代表事件的状态，例如触发 event 对象的元素、鼠标的位置及状态、按下的键等等。event 对象只在事件发生的过程中才有效。event 的某些属性...
它们的行为与 IE6/7 类似，其中 `event.x` 和 `event.y` 等同于 `event.clientX` 和 `event.clientY`。 4. **Opera**： - Opera 的坐标属性类似于 IE，但同时也支持 `event.pageX` 和 `event.pageY`。 由于 W3C ...
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
对于鼠标在特定容器内的相对坐标，`event.offsetX`和`event.offsetY`则非常有用，它们返回鼠标相对于事件源元素的左上角的坐标。 当需要考虑整个文档的滚动时，可以通过`document.documentElement.scrollTop`获取...
- **offsetX/offsetY**：这两个属性返回鼠标相对于元素边框的左上角的水平和垂直距离，如果事件发生在body元素上，则与clientX/clientY相同。 - **pageX/pageY**：这两个属性返回鼠标相对于整个页面（包括滚动条）...
4.offsetX，offsetY(鼠标相对于事件源元素的x，y坐标) 元素的offset属性： 1.offsetTop: 元素相对父元素上边的偏移。(只读) 2.offsetLeft： 元素相对父元素左边的偏移。(只读) 3.offsetWidth： 自身包括padding...
1. Firefox不支持`event.offsetX`、`event.offsetY`以及`event.x`和`event.y`，但可以使用`event.layerX`和`event.layerY`作为替代。 2. IE中的`event.x`和`event.y`等效于Firefox和Chrome中的`event.layerX`和`...
首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3（事件对象中记录的鼠标位置） 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点...
4. x 和 y：一般情况下，这两个属性与 clientX、clientY 相似，但有所不同。 二、DOM 对象 DOM 对象提供了多个属性来获取元素的位置、大小等信息。其中包括： 1. offsetTop 和 offsetLeft：获取元素相对于其 ...
在IE中，可以使用x和y属性来达到类似效果，但需要注意的是，如果事件源的父元素设置了`position:relative`等定位属性，x和y可能会返回相对于该父元素的位置。 3. **offsetX 和 offsetY**： 这两个属性表示鼠标相...
- `event.clientX`/`event.clientY`: 事件触发时鼠标相对于浏览器窗口的位置。 - `event.screenX`/`event.screenY`: 事件触发时鼠标相对于屏幕的位置。 - `event.offsetX`/`event.offsetY`: 事件触发时鼠标相对于...
- `offsetX`、`offsetY`：这两个属性提供了鼠标相对于事件源元素的位置坐标，即鼠标在元素内的位置。 - `clientX`、`clientY`：这两个属性返回鼠标相对于浏览器视口（不包括滚动条）的水平和垂直坐标。 - `pageX`、`...
- **`event.offsetX`** 和 **`event.offsetY`**：分别表示鼠标在触发事件的元素中的水平和垂直位置（相对于元素内容区域的左上角）。 #### 使用场景举例 1. **调整布局**：根据屏幕尺寸或浏览器窗口大小动态调整...
4. clientX 属性：返回鼠标在窗口客户区域中的 X 坐标，返回一个数字值，表示鼠标的水平坐标。 5. clientY 属性：返回鼠标在窗口客户区域中的 Y 坐标，返回一个数字值，表示鼠标的垂直坐标。 6. ctrlKey 属性：...
* clientX和clientY：事件发生时鼠标相对于浏览器左上角的X/Y坐标 * screenX和screenY：事件发生时鼠标相对于显示器左上角的X/Y坐标 事件对象的方法 事件对象还拥有一些重要的方法，例如： * stopPropagation()：...
4. `clientX` 和 `clientY`: 这两个属性分别返回鼠标在浏览器窗口可视区域（不包括滚动条）内的X和Y坐标，是只读属性，用于获取鼠标位置。 5. `ctrlKey`: 类似于`altKey`，`event.ctrlKey`用于检查`Ctrl`键的状态。...