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 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 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
重置版游戏视频
2020/04/09 魔兽争霸
一些php技巧与注意事项分析
2011/02/03 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP7.0版本备注
2015/07/23 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
PHP读取Excel类文件
2017/05/15 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python编码爬坑指南(必看)
2016/06/10 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
Python Django搭建网站流程图解
2020/06/13 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
学校花圃的标语
2014/06/18 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2015年小学开学寄语
2015/02/27 职场文书
功夫熊猫观后感
2015/06/10 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python