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 相关文章推荐
用javascript作一个通用向导说明
Aug 30 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 Javascript
Vue vm.$attrs使用场景详解
Mar 08 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
Zend Studio (eclipse)使用速度优化方法
2011/03/23 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
9种改善AngularJS性能的方法
2017/11/28 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
基于JavaScript实现简单扫雷游戏
2021/01/02 Javascript
Python FTP操作类代码分享
2014/05/13 Python
教大家使用Python SqlAlchemy
2016/02/12 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
Python中单、双下划线的区别总结
2017/12/01 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
Django框架请求生命周期实现原理
2020/11/13 Python
python中round函数保留两位小数的方法
2020/12/04 Python
python画图时设置分辨率和画布大小的实现(plt.figure())
2021/01/08 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
中科方德软件测试面试题
2016/04/21 面试题
初中英语教学反思
2014/01/25 职场文书
护士毕业生自荐信
2014/02/07 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
2014年测量员工作总结
2014/12/12 职场文书
水电施工员岗位职责
2015/04/11 职场文书
考研经验交流会策划书
2015/11/02 职场文书