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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
JScript中的条件注释详解
Apr 24 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
js实现tab切换效果
Feb 16 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
vue递归获取父元素的元素实例
Aug 07 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 注释规范
2012/03/29 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
详解nodejs解压版安装和配置(带有搭建前端项目脚手架)
2018/12/06 NodeJs
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
Python httplib模块使用实例
2015/04/11 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
武汉东之林科技有限公司机试
2013/09/17 面试题
学生自我鉴定
2013/12/18 职场文书
战友聚会邀请函
2014/01/18 职场文书
社区创先争优承诺书
2014/08/30 职场文书
村党支部书记个人对照材料汇报
2014/10/26 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
第一书记观后感
2015/06/08 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android