获取鼠标移动时的坐标是前端开发中常用的操作。随着浏览器的不断升级和发展,现在的浏览器大多都能支持 mousemove
事件和相应的 clientX
、clientY
属性来获取鼠标的坐标。不过对于兼容老版本IE(IE8及以下)的浏览器,我们需要使用其他的方式来获取鼠标坐标。
以下是 JavaScript 获取鼠标移动时的坐标的完整攻略:
1. 监听mousemove
事件
我们可以通过监听 mousemove
事件获取鼠标在当前窗口的位置。该事件在鼠标移动时触发,我们获得坐标信息即可。 下面是监听 mousemove
事件的代码:
document.addEventListener('mousemove', function(event) {
console.log('鼠标x轴坐标:' + event.clientX);
console.log('鼠标y轴坐标:' + event.clientY);
});
在这段代码中,我们通过 addEventListener
方法来监听文档的 mousemove
事件,并在事件回调函数中输出鼠标的 clientX
和 clientY
信息。
2. 兼容老版本浏览器
对于老版本的浏览器(IE8及以下版本),我们无法直接使用 addEventListener
方法来监听事件。此时我们可以使用 IE 提供的 attachEvent
方法实现事件监听。
document.attachEvent('onmousemove', function(event) {
console.log('鼠标x轴坐标:' + event.clientX);
console.log('鼠标y轴坐标:' + event.clientY);
});
这段代码中,我们使用了 attachEvent
方法来监听 mousemove
事件,并在事件回调函数中输出鼠标的 clientX
和 clientY
坐标信息。这样我们就可以在老款浏览器中正确地获取鼠标的位置信息。
3. 处理浏览器兼容性
为了更好地处理浏览器兼容性,我们可以写一个通用的获取鼠标坐标的函数,代码如下:
function getMousePos(event) {
var e = event || window.event;
var posX = e.clientX;
var posY = e.clientY;
if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
posX += document.documentElement.scrollLeft;
posY += document.documentElement.scrollTop;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
posX += document.body.scrollLeft;
posY += document.body.scrollTop;
}
return {
x: posX,
y: posY
};
}
这个函数可以优雅地处理老版本和新版本浏览器的兼容性,返回当前鼠标位置的 x
和 y
坐标值。
示例说明
示例1
下面是一个示例,演示如何在页面中获取鼠标在当前窗口的位置。当用户移动鼠标时,页面会实时输出当前鼠标位置。即时效果:JSFiddle
<!DOCTYPE html>
<html>
<head>
<title>获取鼠标位置</title>
</head>
<body>
<h1>获取鼠标位置</h1>
<p>移动鼠标以查看当前位置</p>
<script>
document.addEventListener('mousemove', function(event) {
var pos = getMousePos(event);
console.log('鼠标x轴坐标:' + pos.x);
console.log('鼠标y轴坐标:' + pos.y);
});
function getMousePos(event) {
var e = event || window.event;
var posX = e.clientX;
var posY = e.clientY;
if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
posX += document.documentElement.scrollLeft;
posY += document.documentElement.scrollTop;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
posX += document.body.scrollLeft;
posY += document.body.scrollTop;
}
return {
x: posX,
y: posY
};
}
</script>
</body>
</html>
在这个示例中,我们使用了 addEventListener
方法来监听文档的 mousemove
事件,并在事件回调函数中输出鼠标的 clientX
和 clientY
信息。同时我们识别浏览器的类型,兼容老版IE。
示例2
下面是另一个示例,用于演示如何在页面中拖拽一个元素,同时实时输出当前鼠标位置。当鼠标拖动元素时,元素会跟随鼠标拖动,并输出实时坐标。即时效果:JSFiddle
<!DOCTYPE html>
<html>
<head>
<title>拖拽元素获取鼠标位置</title>
</head>
<body>
<h1>拖拽元素获取鼠标位置</h1>
<div id="draggable" style="background-color: #00f; color:#fff; width: 100px; height: 100px; position: absolute;">拖动我</div>
<script>
var draggable = document.getElementById('draggable');
var pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
draggable.addEventListener('mousedown', dragMouseDown);
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.addEventListener('mousemove', elementDrag);
document.addEventListener('mouseup', stopElementDrag);
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
var pos = getMousePos(e);
pos1 = pos3 - pos.x;
pos2 = pos4 - pos.y;
pos3 = pos.x;
pos4 = pos.y;
draggable.style.top = (draggable.offsetTop - pos2) + "px";
draggable.style.left = (draggable.offsetLeft - pos1) + "px";
console.log('鼠标x轴坐标:' + pos.x);
console.log('鼠标y轴坐标:' + pos.y);
}
function stopElementDrag() {
document.removeEventListener('mousemove', elementDrag);
document.removeEventListener('mouseup', stopElementDrag);
}
function getMousePos(e) {
var e = e || window.event;
var posX = e.clientX;
var posY = e.clientY;
if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
posX += document.documentElement.scrollLeft;
posY += document.documentElement.scrollTop;
} else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
posX += document.body.scrollLeft;
posY += document.body.scrollTop;
}
return {
x: posX,
y: posY
};
}
</script>
</body>
</html>
在这个示例中,我们创建了一个可拖拽的元素,并使用 mousedown
、mousemove
和 mouseup
事件相应鼠标拖拽元素的操作。在 elementDrag
函数中,我们利用 getMousePos
函数输出鼠标的实时位置信息,并让元素跟随鼠标移动。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox) - Python技术站