本文介绍了一个使用JavaScript实现的网页应用，该应用可以实时显示鼠标光标在屏幕上的位置，包括相对于视口、屏幕和元素的坐标。通过简单的HTML和JavaScript代码，读者可以了解如何获取这些坐标，并观察不同事件（如鼠标移动）对坐标的影响。
<html>
<title>测试鼠标光标位置</title>
<head>
<script language="JavaScript">
function showPos()
{
fired.innerText="X="+event.x+" Y="+event.y;
client.innerText="X="+event.clientX+" Y="+event.clientY;
myScreen.innerText="X="+event.screenX+" Y="+event.screenY;
offset.innerText="X="+event.offsetX+" Y="+event.offsetY;
mycursor.style.posLeft=event.clientX;
mycursor.style.posTop=event.clientY;
}
</script>
</head>
<body onmousemove="showPos()">
<h2 >元素和事件名称</h2>
<hr>
<div id="mycursor" style="position:absolute; top:10;left:10; height:20;width:20;background:blue"></div>
<p>按一下文件显示鼠标光标的位置</p>
<form>
<input type="button" value="坐标（0,0）" onclick="window.moveTo(0,0);">
<input type="button" value="坐标（100,150）" onclick="window.moveTo(100,150);">
</form>
Fired：<span id="fired"></span><br>
Client：<span id="client"></span><br>
Screen：<span id="myScreen"></span><br>
Offset：<span id="offset"></span><br>
</body>
</html>
扫一扫
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
