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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
jqTransform美化表单
Oct 10 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 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 创建标签云函数代码
2010/05/26 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python迭代用法实例教程
2014/09/08 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
教师个人培训总结
2015/02/11 职场文书
上课迟到检讨书
2015/05/06 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python