javascript实时获取鼠标坐标值并显示的方法


Posted in Javascript onApril 30, 2015

本文实例讲述了javascript实时获取鼠标坐标值并显示的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS实时获取鼠标坐标值并显示</title>
</head>
<body>
<script type="text/javascript">
 var getCoordInDocumentExample = function(){
  var coords = document.getElementById("coords");
  coords.onmousemove = function(e){
   var pointer = getCoordInDocument(e);
   var coord = document.getElementById("coord");
   coord.innerHTML = "X,Y=("+pointer.x+", "+pointer.y+")";
  }
 }
 var getCoordInDocument = function(e) {
  e = e || window.event;
  var x = e.pageX || (e.clientX +
   (document.documentElement.scrollLeft
   || document.body.scrollLeft));
  var y= e.pageY || (e.clientY +
   (document.documentElement.scrollTop
   || document.body.scrollTop));
  return {'x':x,'y':y};
 }
 window.onload = function(){
   getCoordInDocumentExample();
 };
</script>
<div id="coords" 
style="width:500px;height:200px;background:#F2F1D7;
border:2px solid #0066cc;">
请在此移动鼠标。
</div>
<br />
<div id="coord" 
style="width:500px;border:2px solid #336699;"> </div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
编写React组件项目实践分析
Mar 04 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
vue组件入门知识全梳理
Sep 21 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 #Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 #Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 #Javascript
jQuery层动画定位滑动效果的方法
Apr 30 #Javascript
jquery中$each()方法的使用指南
Apr 30 #Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 #Javascript
javascript实现checkbox全选的代码
Apr 30 #Javascript
You might like
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
lib.utf.js
2007/08/21 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
Javascript中replace()小结
2015/09/30 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
import的本质解析
2017/10/30 Python
Python if语句知识点用法总结
2018/06/10 Python
python随机数分布random测试
2018/08/27 Python
Django ImageFiled上传照片并显示的方法
2019/07/28 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python logging添加filter教程
2019/12/24 Python
python保留小数位的三种实现方法
2020/01/07 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
电子商务专业个人的自我评价
2013/12/19 职场文书
捐款倡议书
2014/04/14 职场文书
保管员岗位职责
2015/02/14 职场文书
元宵节寄语大全
2015/02/27 职场文书
纪检部部长竞选稿
2015/11/21 职场文书
《雪地里的小画家》教学反思
2016/02/16 职场文书
无线电通信名词解释
2022/02/18 无线电
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python