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 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
JavaScript实现网页下拉菜单效果
Nov 20 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
星际流派综述
2020/03/04 星际争霸
关于更改Zend Studio/Eclipse代码风格主题的介绍
2013/06/23 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
PHP输出XML格式数据的方法总结
2017/02/08 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python excel多行合并的方法
2020/12/09 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
校园招聘策划书
2014/01/09 职场文书
开展批评与自我批评心得体会
2014/10/17 职场文书
岳麓书院导游词
2015/02/03 职场文书
公司捐书倡议书
2015/04/27 职场文书
大学团日活动总结书
2015/05/11 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript