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 jQuery $.post $.ajax用法
Jul 09 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
js中实现继承的五种方法
Jan 25 Javascript
小程序实现文字循环滚动动画
Jun 14 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自动适应范围的分页代码
2008/08/05 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
快速了解python leveldb
2018/01/18 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
python turtle 绘制太极图的实例
2019/12/18 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
安全生产责任书范本
2014/04/15 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
简单租房协议书(范本)
2014/10/13 职场文书