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 相关文章推荐
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
layer.prompt输入层的例子
Sep 24 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
javascript如何实现create方法
Nov 04 Javascript
JS数据类型STRING使用实例解析
Dec 18 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
2016/02/17 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
python socket 超时设置 errno 10054
2014/07/01 Python
Python中使用Boolean操作符做真值测试实例
2015/01/30 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
scrapy爬虫完整实例
2018/01/25 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
sklearn的predict_proba使用说明
2020/06/28 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
中学自我评价
2014/01/31 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
Mysql中常用的join连接方式
2022/05/11 MySQL