<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type='text/javascript'>
function mousePosition(ev){//返回一个类
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
}
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);//mousePos现在为一个类
document.getElementById('txt').value=mousePos.x+":"+mousePos.y
}
document.onmousemove = mouseMove
</script>
</head>
<body>
<div>
<input id="txt"/>
</div>
</body>
</html>
注：因为我们要在 MSIE 和其他浏览器下运行，Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚动 500， 那么 pageY 将变成 750。
MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去
分享到：
相关推荐
2. **事件对象（Event Object）**：了解`event`对象及其属性如`pageX`、`pageY`、`clientX`和`clientY`等，这些属性可以获取鼠标相对于浏览器视口的位置。 3. **DOM 操作**：利用`getElementById`方法获取页面元素，...
【JavaScript DOM位置、大小、鼠标定位操作】是Web开发中不可或缺的部分，JavaScript提供了丰富的属性用于操作DOM元素的位置、尺寸以及获取鼠标位置。了解并熟练掌握这些属性有助于提高开发效率和编写高质量的Web...
### 获取鼠标在文档的坐标位置（兼容多浏览器） 在网页开发过程中，经常需要根据用户的鼠标操作来进行相应的逻辑处理。例如，实现图片的上一页和下一页功能时，我们需要知道用户鼠标点击的具体位置来做出响应。本文...
var x = event.clientX + document.body.scrollLeft - document.body.clientLeft; var y = event.clientY + document.body.scrollTop - document.body.clientTop; document.getElementById('mousePosition')....
1. **浏览器兼容性**：虽然现代浏览器普遍支持`pageX`和`pageY`，但在处理旧版浏览器时，仍需使用`clientX`、`clientY`、`scrollLeft`、`scrollTop`等属性进行兼容性处理。 2. **性能考虑**：频繁触发`mousemove`...
3. 如果没有，则使用 `clientX`、`clientY` 结合 `document.body.scrollLeft` 和 `document.body.scrollTop` 来计算鼠标相对于文档左上角的位置，再减去 `document.body.clientLeft` 和 `document.body.clientTop`，...
在本文中，我们将探讨如何使用 JavaScript 获取鼠标在页面上的位置以及触发事件的对象。 首先，让我们关注如何获取鼠标的位置。JavaScript 提供了 `event` 对象来处理各种用户事件，包括鼠标移动。在以下的代码片段...
例如，为了获取鼠标相对于文档左上角的位置，可以这样处理： ```javascript var pageX, pageY; if (event.pageX) { pageX = event.pageX; pageY = event.pageY; } else { pageX = event.clientX + document.body...
`event.pageX`和`event.pageY`在非IE浏览器中提供相对于文档的坐标，而`event.clientX`和`event.clientY`在IE中提供相对于窗口的坐标。考虑到滚动条的影响，需要添加`scrollLeft`和`scrollTop`，以及在IE中处理边框...
在事件处理函数中，我们可以从`e`对象中获取原始事件（`originalEvent`），然后通过`x`和`y`属性获取鼠标的位置。但需要注意的是，这些属性并不在所有浏览器中都可用，因此我们需要进行兼容性检查。如果`x`和`y`不...
第一段代码是利用全局变量来获取实时鼠标的位置。 代码如下: var xPos; var yPos; [removed](function(evt){ evt=evt || window.event; if(evt.pageX){ xPos=evt.pageX; yPos=evt.pageY; } else { xPos=evt.clientX+...
// 说明：获取鼠标位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body....
x: event.pageX || (event.clientX + document.body.scrollLeft - document.body.clientLeft), y: event.pageY || (event.clientY + document.body.scrollTop - document.body.clientTop) }; console.log(`X: ${...
6. 事件对象的坐标属性：在处理鼠标或触摸事件时，event对象提供了`clientX`, `clientY`, `screenX`, `screenY`, `pageX`和`pageY`等属性，分别表示鼠标位置相对于视口、屏幕和整个页面的坐标。 通过以上方法，我们...
var x = event.clientX + document.body.scrollLeft - document.body.clientLeft; var y = event.clientY + document.body.scrollTop - document.body.clientTop; return { x: x, y: y }; } }; ``` 这里需要...
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; } function mouseMove(ev) { ev = ev || window.event; ...
最后，mousePosition函数用于兼容不同浏览器中获取鼠标位置的方式。 通过上述方法，我们可以实现一个类似百度登录窗口的拖拽效果，增强用户交互体验。实际上，这种拖拽技术在许多Web应用中都有广泛的应用，如模态...
在计算机科学中，坐标是一种非常重要的属性，特别是在网页设计和前端开发中，经常需要获取鼠标或者特定元素的位置坐标来执行某些操作。本知识点将详细介绍如何通过JavaScript获取鼠标的坐标位置。JavaScript是一种...