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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
vue router 配置路由的方法
Jul 26 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
javascript实现前端分页功能
Nov 26 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
Vuex和前端缓存的整合策略详解
2017/05/09 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
vue按需加载实例详解
2019/09/06 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
一组SQL面试题
2016/02/15 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
建筑工地文明标语
2014/10/09 职场文书
先进教师事迹材料
2014/12/16 职场文书
公司开会通知
2015/04/20 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技