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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
小程序实现订单倒计时功能
Apr 23 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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
一个多文件上传的例子(原创)
2006/10/09 PHP
安装APACHE
2007/01/15 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
javascript实用方法总结
2015/02/06 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python对DICOM图像的读取方法详解
2017/07/17 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python asyncio 协程库的使用
2021/01/21 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
副厂长岗位职责
2014/02/02 职场文书
工程项目经理任命书
2014/06/05 职场文书
欢迎新生标语
2014/10/06 职场文书