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 相关文章推荐
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
javascript实现贪吃蛇经典游戏
Apr 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
php不写闭合标签的好处
2014/03/04 PHP
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
Python实现Linux的find命令实例分享
2017/06/04 Python
Django自定义认证方式用法示例
2017/06/23 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
替换python字典中的key值方法
2018/07/06 Python
Python字典对象实现原理详解
2019/07/01 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
jupyter 添加不同内核的操作
2021/02/06 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
接口的多继承会带来哪些问题
2015/08/17 面试题
综合办公室主任职责
2013/12/16 职场文书
建议书标准格式
2014/03/12 职场文书
防沙治沙典型材料
2014/05/07 职场文书
先进人物事迹材料
2014/12/29 职场文书
医院营销工作计划
2015/01/16 职场文书
花木兰观后感
2015/06/10 职场文书
感恩教育观后感
2015/06/17 职场文书
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python