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 相关文章推荐
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
vue slot 在子组件中显示父组件传递的模板
Mar 02 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
Javascript原型链及instanceof原理详解
May 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
自己动手做一个SQL解释器
2006/10/09 PHP
检查php文件中是否含有bom的函数
2012/05/31 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
详解自定义ajax支持跨域组件封装
2018/02/08 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
记录Django开发心得
2014/07/16 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
python语言是免费还是收费的?
2020/06/15 Python
python中rc1什么意思
2020/06/19 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
法学专业应届生求职信
2013/10/16 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
python基于turtle绘制几何图形
2021/06/15 Python