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的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
JQuery对class属性的操作实现按钮开关效果
Oct 11 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
10个php函数实用却不常见
2015/10/13 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
2016/08/08 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
javascript使用链接跨域下载图片
2019/11/01 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python3中exp()函数用法分析
2019/02/19 Python
django query模块
2019/04/20 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python下载的库包存放路径
2020/07/27 Python
Python中logger日志模块详解
2020/08/04 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
学校联谊活动方案
2014/02/15 职场文书
主要负责人任命书
2014/06/06 职场文书
机动车交通事故协议书
2015/01/29 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
运动会1000米加油稿
2015/07/21 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android