JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)


Posted in Javascript onSeptember 13, 2014

JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera ),测试通过

直接复制成html文件,即可运行。

为方便大家测试特准备了一份在线演示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>JavaScript获取鼠标移动时的坐标(兼容:IE8、谷歌、Firefox、Opera)_三水点靠木</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
.tip { 
width:200px; 
border:2px solid #ddd; 
padding:8px; 
background:#f1f1f1; 
color:#666; 
} 
</style> 
<script type="text/javascript"> 
 
//方法1 
function mousePos(e){ 
  var x,y; 
  var e = e||window.event; 
  return { 
    x:e.clientX+document.body.scrollLeft + document.documentElement.scrollLeft, 
    y:e.clientY+document.body.scrollTop + document.documentElement.scrollTop 
  }; 
}; 
 
//方法2 
//Firefox支持属性pageX,与pageY属性,这两个属性已经把页面滚动计算在内了, 
//在Chrome可以通过document.body.scrollLeft,document.body.scrollTop计算出页面滚动位移, 
//而在IE下可以通过document.documentElement.scrollLeft ,document.documentElement.scrollTop 
function getMousePos(event) { 
      var e = event || window.event; 
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; 
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop; 
      var x = e.pageX || e.clientX + scrollX; 
      var y = e.pageY || e.clientY + scrollY; 
      //alert('x: ' + x + '\ny: ' + y); 
      return { 'x': x, 'y': y }; 
    } 
 
function test(e){ 
document.getElementById("mjs").innerHTML = getMousePos(e).x+','+getMousePos(e).y;   
}; 
</script> 
</head> 
<body> 
<div id="mjs" class="tip">获取鼠标点击位置坐标</div> 
<div id="test" style="width:1000px;height:1000px;background:#ccc;" onmousemove="test(event)"></div> 
</body> 
</html>
Javascript 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
javascript处理table表格的代码
Dec 06 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 #Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 #Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 #Javascript
如何用JavaScript定义一个类
Sep 12 #Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 #Javascript
jquery根据锚点offset值实现动画切换
Sep 11 #Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 #Javascript
You might like
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
vue实现通讯录功能
2018/07/14 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python Tkinter简单布局实例教程
2014/09/03 Python
python有证书的加密解密实现方法
2014/11/19 Python
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
使用python语言,比较两个字符串是否相同的实例
2018/06/29 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python with语句用法原理详解
2020/07/03 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
高中地理教学反思
2014/01/29 职场文书
《诺贝尔》教学反思
2014/02/17 职场文书
加入学生会演讲稿
2014/04/24 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
公司2014年度工作总结
2014/12/10 职场文书
求职自我评价范文
2015/03/09 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python