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 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
Apr 13 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
Vue中 key keep-alive的实现原理
Sep 18 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
优化Vue中date format的性能详解
Jan 13 Javascript
Vuex的热更替如何实现
Jun 05 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加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python批量提取word内信息
2015/08/09 Python
Python第三方库的安装方法总结
2016/06/06 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
python求最大连续子数组的和
2018/07/07 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
《日月潭》教学反思
2014/02/28 职场文书
护理目标管理责任书
2014/07/25 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
辩护词范文大全
2015/05/21 职场文书
开国大典观后感
2015/06/04 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python