JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera )，测试通过
直接复制成html文件，即可运行。
为方便大家测试特准备了一份在线演示
<!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>
<title>JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、
JavaScript是一种广泛应用于网页和网络应用的编程语言，它在网页交互和动态效果方面扮演着重要角色。本篇文章将深入探讨如何使用JavaScript获取鼠标在页面上移动时的坐标，并且介绍如何实现这一功能的同时确保兼容性，包括IE8、Chrome、Firefox和Opera等主流浏览器。
在JavaScript中，获取鼠标坐标主要涉及两个事件：`mousemove`和事件对象的属性。当用户在网页上移动鼠标时，`mousemove`事件会被触发。事件对象通常包含了鼠标位置的信息，例如`clientX`和`clientY`属性，它们分别表示鼠标相对于浏览器视口左上角的水平和垂直距离。然而，这些坐标并不考虑页面的滚动位移，因此需要额外处理。
在不同的浏览器中，处理页面滚动位移的方式有所不同。在IE8及更早版本中，需要结合`document.documentElement.scrollLeft`和`document.documentElement.scrollTop`来获取滚动位移；而在Firefox中，可以使用`event.pageX`和`event.pageY`属性，这两个属性已经包含了页面滚动的影响。对于Chrome和其他现代浏览器，`event.clientX`和`event.clientY`配合`document.body.scrollLeft`和`document.body.scrollTop`可以得到正确的坐标。
以下两种方法是实现兼容性获取鼠标坐标的常见做法：
方法1：
```javascript
function mousePos(e) {
var x, y;
var e = e || window.event;
return {
x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
}
```
方法2：
```javascript
function getMousePos(event) {
var e = event || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || e.clientX + scrollX;
var y = e.pageY || e.clientY + scrollY;
return { 'x': x, 'y': y };
}
```
这两种方法都可以有效获取到鼠标的页面坐标。为了展示效果，可以在HTML文件中创建一个可拖动的元素，如`<div>`，并为其添加`onmousemove`事件监听器，这样每次鼠标移动时都会更新元素的内容显示当前坐标。示例代码如下：
```html
<div id="mjs" class="tip">获取鼠标点击位置坐标</div>
<div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div>
```
在这个例子中，`test`函数会调用`getMousePos`或`mousePos`，并将返回的坐标值显示在`id="mjs"`的`<div>`元素中。
通过这样的实现，你可以确保在不同浏览器中，鼠标移动时的坐标都能正确地被获取和显示。这种技术在制作交互式网页、拖放功能、画布应用或其他需要跟踪鼠标位置的场景中非常有用。了解并掌握这些兼容性的技巧对于进行跨浏览器的JavaScript开发至关重要。
