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 相关文章推荐
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 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函数
2006/10/09 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php实现的短网址算法分享
2014/06/20 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
jQuery each()方法的使用方法
2010/03/18 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
个人委托书
2014/07/31 职场文书
社团活动总结格式
2014/08/29 职场文书
面试自我评价范文
2014/09/17 职场文书
儿园租房协议书范本
2014/12/02 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
javascript对象3个属性特征
2021/11/17 Javascript