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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
悬浮数字的实现案例
Feb 19 Javascript
js函数调用的方式
May 06 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 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实现下载CSS文件中的图片
2015/12/06 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
jQuery 使用手册(一)
2009/09/23 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
2016/09/20 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python写的服务监控程序实例
2015/01/31 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python机器学习之KNN分类算法
2018/08/29 Python
python脚本后台执行方式
2019/12/21 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
jupyter实现重新加载模块
2020/04/16 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
什么是Web Service?
2012/07/25 面试题
新三好学生主要事迹
2014/01/23 职场文书
八一慰问活动方案
2014/02/07 职场文书
预备党员公开承诺书
2014/05/28 职场文书
法人委托书
2014/07/31 职场文书
平安工地汇报材料
2014/08/19 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
js实现自动锁屏功能
2021/06/02 Javascript