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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
javascript等号运算符使用详解
Apr 16 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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中的观察者模式简单实例
2015/01/20 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
PHP使用函数用法详解
2018/09/30 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
2013/08/12 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
详解Python发送email的三种方式
2018/10/18 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
EJB面试题
2015/07/28 面试题
最新党员思想汇报
2014/01/01 职场文书
考试作弊被抓检讨书
2014/01/10 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
诚信考试倡议书
2014/04/15 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
2014年宣传工作总结
2014/11/18 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
初一军训感言
2015/08/01 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android