js使用onmousemove和onmouseout获取鼠标坐标的方法

前端技术 2023/09/07 JavaScript

本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法。分享给大家供大家参考。具体如下：

下面的js代码演示了onmousemove和onmouseout事件的用法，鼠标在指定区域内移动时会动态显示鼠标坐标信息

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(e)
{
x=e.clientX;
y=e.clientY;
coor=\"Coordinates: (\" + x + \",\" + y + \")\";
document.getElementById(\"demo\").innerHTML=coor
}
function clearCoor()
{
document.getElementById(\"demo\").innerHTML=\"\";
}
</script>
</head>
<body style=\"margin:0px;\">
<div id=\"coordiv\" style=\"width:199px;height:99px;border:1px solid\" 
onmousemove=\"myFunction(event)\" onmouseout=\"clearCoor()\"></div>
<p>Mouse over the rectangle above, 
and get the coordinates of your mouse pointer.</p>
<p id=\"demo\"></p>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/18402

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案