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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
js数据类型检测总结
Aug 05 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
用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
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
javascript中length属性的探索
2011/07/31 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
webpack3之loader全解析
2017/10/26 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
django用户登录和注销的实现方法
2018/07/16 Python
简单了解python变量的作用域
2019/07/30 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Python中bisect的使用方法
2019/12/31 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
设计大赛策划方案
2014/06/13 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
客户答谢会活动方案
2014/08/31 职场文书
单位工作证明书格式
2014/10/04 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python