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 相关文章推荐
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
Vue3 中的数据侦测的实现
2019/10/09 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
python生成ppt的方法
2018/06/07 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
树莓派实现移动拍照
2019/06/22 Python
django和vue实现数据交互的方法
2019/08/21 Python
Python实现微信机器人的方法
2019/09/06 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
中学实习教师自我鉴定
2013/12/12 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
大学新生入学教育方案
2014/05/16 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
升学宴答谢词
2015/01/05 职场文书