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 相关文章推荐
读jQuery之五(取DOM元素)
Jun 20 Javascript
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
js实现录音上传功能
Nov 22 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
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
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
js控制容器隐藏出现防止样式变化的两种方法
2014/04/25 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
vue中子组件的methods中获取到props中的值方法
2018/08/27 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python生成数字图片代码分享
2017/10/31 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Win10下用Anaconda安装TensorFlow(图文教程)
2020/06/18 Python
Html5移动端弹幕动画实现示例代码
2018/08/27 HTML / CSS
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
法制宣传日活动总结
2014/04/29 职场文书
学生打架检讨书
2014/10/20 职场文书
招标保密承诺书
2015/01/20 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL