javascript获取当前鼠标坐标的方法


Posted in Javascript onJanuary 10, 2015

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

对于javascript获取当前鼠标坐标来说,得对不同浏览器的坐标位置有所了解。具体代码如下:

<html>

<head>

<title>javascript获取当前鼠标坐标</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<script type="text/javascript">

 function mousePosition(ev){

  if(ev.pageX || ev.pageY){//firefox、chrome等浏览器

   return {x:ev.pageX,y:ev.pageY};

  }

  return {// IE浏览器

   x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

   y:ev.clientY + document.body.scrollTop - document.body.clientTop

  };

 }

 function mouseMove(ev){

  ev = ev || window.event;

  var mousePos = mousePosition(ev);

  document.getElementById('x').innerHTML = mousePos.x;

  document.getElementById('y').innerHTML = mousePos.y;

 }

 document.onmousemove = mouseMove;

</script>

<style type="text/css">

h3{color:blue;}

p{line-height:30px;height:30px;font-size:14px;width:500px;}

span{color:orange;font-weight:bold;}

</style>

</head>

<body>

 <h3>您的鼠标已经被跟踪</h3>

 <p> X 轴坐标:<span id="x"></span></p>

 <p> Y 轴坐标:<span id="y"></span></p>

</body>

</html>

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

Javascript 相关文章推荐
jQuery调用WebService的实现代码
Jun 19 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
Sep 04 Javascript
js判断某个方法是否存在实例代码
Jan 10 #Javascript
javascript实现回车键提交表单方法总结
Jan 10 #Javascript
jquery文档操作wrap()方法实例简述
Jan 10 #Javascript
js实现键盘控制DIV移动的方法
Jan 10 #Javascript
js实现jquery的offset()方法实例
Jan 10 #Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 #Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 #Javascript
You might like
详解:――如何将图片储存在数据库里
2006/12/05 PHP
修改php.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
零基础php编程好学吗
2019/10/11 PHP
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
vue使用websocket的方法实例分析
2019/06/22 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
Python 查看文件的读写权限方法
2018/01/23 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
安装docker-compose的两种最简方法
2019/07/30 Python
Python随机数函数代码实例解析
2020/02/09 Python
python生成大写32位uuid代码
2020/03/03 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
学院领导推荐信
2013/10/30 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
工程部岗位职责范本
2015/04/11 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书