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 相关文章推荐
Js组件的一些写法
Sep 10 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
分类解析jQuery选择器
Nov 23 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
JS闭包经典实例详解
Dec 20 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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/12/06 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
layer.js之回调销毁对话框的例子
2019/09/11 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
Python实现的一个自动售饮料程序代码分享
2014/08/25 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
通过自学python能找到工作吗
2020/06/21 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
运动会入场词60字
2014/02/15 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
公司新年寄语
2014/04/04 职场文书
党员批评与自我批评
2014/10/15 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
开业典礼致辞
2015/07/29 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
vue使用watch监听属性变化
2022/04/30 Vue.js