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 1.8 Release版本发布了
Aug 14 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
原生JavaScript实现轮播图
Jan 10 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
浅析Apache中RewriteCond规则参数的详细介绍
2013/06/30 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
js实现点击左右按钮轮播图片效果实例
2015/01/29 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
详解升级react-router 4 踩坑指南
2017/08/14 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python实现基本进制转换的方法
2015/07/11 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
对numpy中轴与维度的理解
2018/04/18 Python
python实现批量图片格式转换
2020/06/16 Python
Numpy中的mask的使用
2018/07/21 Python
python实现事件驱动
2018/11/21 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
物业品质提升方案
2014/06/08 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
2014年副班长工作总结
2014/12/10 职场文书
教师工作决心书
2015/02/04 职场文书
伏羲庙导游词
2015/02/09 职场文书
商场营业员岗位职责
2015/04/14 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript