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的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
基于jQuery的360图片展示实现代码
Jun 14 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
Javascript浅谈之this
Dec 17 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JavaScript编程学习技巧汇总
Feb 21 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
javascript简单链式调用案例分析
May 10 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 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
索尼SONY SRF-S83/84电路分析和打磨
2021/03/02 无线电
PHP中的类-什么叫类
2006/11/20 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
JScript的条件编译
2007/05/29 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
基于js的变量提升和函数提升(详解)
2017/09/17 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
Python与Redis的连接教程
2015/04/22 Python
Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能示例
2018/05/16 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python之修改图片像素值的方法
2019/07/03 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
如何手工释放资源
2013/12/15 面试题
中专生的个人自我评价
2013/12/11 职场文书
经典演讲稿范文
2013/12/30 职场文书
银行领导证婚词
2014/01/11 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers