js event对象获取鼠标坐标

最新推荐文章于 2024-09-01 09:40:14 发布

lulu_jiang

最新推荐文章于 2024-09-01 09:40:14 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： function float c

本文链接：https://blog.youkuaiyun.com/lulu_jiang/article/details/7064326

Javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的JavaScript示例，演示了如何在网页上显示鼠标指针的实时坐标，并在鼠标离开指定区域时清除坐标显示。此功能通过监听mousemove和mouseout事件实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"> 
function cnvs_getCoordinates(e)
{
    x=e.clientX;
    y=e.clientY;
    document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
 
function cnvs_clearCoordinates()
{
    document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>

<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3"
onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<div id="xycoordinates"></div>
</body>
</html>