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

更新时间：2015年03月31日 15:13:09 作者：欧阳不疯

这篇文章主要介绍了js使用onmousemove和onmouseout获取鼠标坐标的方法,涉及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程序设计有所帮助。

您可能感兴趣的文章:

javascript图片延迟加载实现方法及思路
这篇文章主要介绍了javascript图片延迟加载实现方法及思路，有时我们需要用懒加载，也就是延迟加载图片的方式，来提高网站的亲和力,需要的朋友可以参考下
2015-12-12
微信网页授权并获取用户信息的方法
这篇文章主要介绍了微信网页授权并获取用户信息的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
javascript(js)的小数点乘法除法问题详解
本篇文章主要是对javascript(js)中的小数点乘法除法问题进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-03-03
JavaScript基于对象去除数组重复项的方法
这篇文章主要介绍了JavaScript基于对象去除数组重复项的方法,结合实例形式分析了javascript数组去重的操作步骤与具体实现技巧,需要的朋友可以参考下
2016-10-10
javascript 事件对象坐标事件说明
javascript 事件对象坐标事件说明，学习js坐标事件的朋友可以参考下。
2010-05-05
javascript 易错知识点实例小结
这篇文章主要介绍了javascript 易错知识点,结合实例形式总结分析了javascript 对象属性、继承常见易错知识点与注意事项,需要的朋友可以参考下
2020-04-04
使用JS获取SessionStorage的值
这篇文章给大家介绍了使用js获取sessionstorage中的值，首先获取它是为了将获得的信息输出或者alert（),其次，在静态页面中，如果使用sessionStorage就相当于在动态页面里连接了数据库一样，具体内容详情大家参考下本文
2018-01-01
echarts如何实现动态曲线图(多条曲线)
这篇文章主要介绍了echarts如何实现动态曲线图(多条曲线)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
js实现移动端简易滑动表格
这篇文章主要为大家详细介绍了js实现移动端简易滑动表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
经典的间隔时间滚动新闻（图片），可控制滚动
经典的间隔时间滚动新闻（图片），可控制滚动其实这个也挺多网站用到的，简单又实用。(
2010-05-05