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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
jQuery实现三级菜单的代码
May 09 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
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 文件缓存函数
2011/10/08 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
浅析THINKPHP的addAll支持的最大数据量
2015/02/03 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
jquery 表格分页等操作实现代码(pagedown,pageup)
2010/04/11 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
3kb jQuery代码搞定各种树形选择的实现方法
2016/06/10 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
jquery遍历标签中自定义的属性方法
2016/09/17 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
JavaScript:ES2019 的新特性(译)
2019/08/08 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python中的集合介绍
2019/01/28 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
What is view? why do we have view?
2012/06/22 面试题
GWT都有什么特性
2016/12/02 面试题
办公室副主任职责范本
2014/03/08 职场文书
教职工代表大会主持词
2014/04/01 职场文书
食品销售计划书
2014/04/26 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
Unity连接MySQL并读取表格数据的实现代码
2021/06/20 MySQL
python基础之//、/与%的区别详解
2022/06/10 Python