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 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
Jquery中显示隐藏的实现代码分析
Jul 26 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
Node.js使用Angular简单示例
May 11 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
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 引用(&amp;)详解
2009/11/20 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
PHP创建PowerPoint2007文档的方法
2015/12/10 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
js实现菜单跳转效果
2020/12/11 Javascript
Python 文件重命名工具代码
2009/07/26 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python 的 with 语句详解
2014/06/13 Python
Python中操作MySQL入门实例
2015/02/08 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Html5页面二次分享的实现
2018/07/30 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
控制工程专业个人求职信
2013/09/25 职场文书
美德好少年事迹材料
2014/01/19 职场文书
女子职高个人自荐书
2014/02/01 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
业务员岗位职责
2015/02/03 职场文书
辩论赛新闻稿
2015/07/17 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers