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实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
Vue自定义指令写法与个人理解
Feb 09 Javascript
vue实现购物车加减
May 30 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
JS数组方法some、every和find的使用详情
Oct 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
2006/10/09 PHP
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
vue内置指令详解
2018/04/03 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
2019/04/15 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
致标枪运动员加油稿
2014/02/15 职场文书
初中成绩单评语
2014/12/29 职场文书
建国大业观后感800字
2015/06/01 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
详解Laravel服务容器的优势
2021/05/29 PHP
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL