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


Posted in Javascript onMarch 31, 2015

本文实例讲述了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 相关文章推荐
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
JavaScript字符串对象
Jan 14 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
基于JavaScript 实现拖放功能
Sep 12 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 #Javascript
JS动态改变表格边框宽度的方法
Mar 31 #Javascript
60行js代码实现俄罗斯方块
Mar 31 #Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 #Javascript
js实现的牛顿摆效果
Mar 31 #Javascript
JS动态显示表格上下frame的方法
Mar 31 #Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 #Javascript
You might like
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
浅谈php扩展imagick
2014/06/02 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python数据结构之翻转链表
2017/02/25 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python将string转换到float的实例方法
2019/07/29 Python
python实现LRU热点缓存及原理
2019/10/29 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
作风建设整改方案
2014/10/27 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
放弃继承权公证书
2015/01/23 职场文书