js Event对象的5种坐标


Posted in Javascript onSeptember 12, 2011

但是你懂的,浏览器实在太不和谐了,兼容性且不说,各种坐标属性看得人头昏眼花,极容易混淆。好吧,我来总结一下:

测试浏览器:IE8, Chrome13, FF8, Safari5, Opera11
先上测试用例(用HTML5的doctype测试,也可看出未来的发展趋势,其他doctype可自行测试):

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> 
<style type="text/css"> 
html { 
background:red; 
} 
body { 
background:green; 
} 
#null { 
height:1000px; 
} 
#btn { 
cursor:default; 
background:blue; 
width:50px; 
height:30px; 
line-height:30px; 
text-align:center; 
} 
</style> 
</head> 
<body> 
<div id='null'>空白区</div> 
<div id="btn">点击</div><!-- 按钮用DIV是因为原生按钮有圆角,不确定边界 --> 
</body> 
<script type="text/javascript"> 
window.onload = function(){ 
var btn = document.getElementById('btn'); 
btn.onclick = function(e){ 
e = e|| window.event; 
var box = (e.target || e.srcElement).getBoundingClientRect(), 
offsetX = e.clientX - box.left, 
offsetY = e.clientY - box.top; 
p('x: '+ e.x+', y: '+e.y); 
p('pageX: '+ e.pageX+', pageY: '+e.pageY); 
p('offsetX: '+ e.offsetX+', offsetY: '+e.offsetY); 
p('FF实现 offsetX: '+offsetX+', offsetY: '+offsetY); 
p('layerX: '+ e.layerX+', layerY: '+e.layerY); 
p('clientX: '+ e.clientX+', clientY: '+e.clientY); 
p('body.scrollLeft: '+ document.body.scrollLeft+', body.scrollTop: '+document.body.scrollTop); 
p('body.clientLeft: ' + document.body.clientLeft + ', body.clientTop: '+document.body.clientTop); 
p('documentElement.scrollLeft: '+ document.documentElement.scrollLeft+', documentElement.scrollTop: '+document.documentElement.scrollTop); 
p('documentElement.clientLeft: ' + document.documentElement.clientLeft + ', documentElement.clientTop: '+document.documentElement.clientTop); 
} 
} 
function p(s){ 
console.log(s); 
} 
</script> 
</html>

问:怎样获取鼠标相对于浏览器可视文档区域左上角的位置?
答:x, y和clientX, clientY皆可,但是x, y在IE下表示鼠标相对于文档开头的位置(即如果有滚到条的话,会计算在内),还有FF也不支持x, y

推荐: clientX, clientY

问:怎样获取鼠标相对于文档开头的位置?
答: IE:使用x, y(前提是事件源的父元素(一直到documentElement)没有设置position:relative之类的,否则相对于最近元素,而非相对于文档)

非IE:使用pageX, pageY

layerX, layerY其实也可以,但是IE和Opera不支持!

那么如何确保IE正常取值呢?答:event.clientX + document.documentElement.scrollLeft,

event.clientY + document.documentElement.scrollTop

问:怎样获取鼠标相对于事件源(event.target||event.srcElement)左上角的位置?
答:offsetX, offsetY。但是FF不支持,怎样办呢?

1. 先获取鼠标相对于浏览器可视文档区域左上角的位置

2. 然后获取事件源相对于浏览器可视文档区域左上角的位置

3. 相减,收工
也许有人会问,这第2步怎么做啊?好吧,好人做到底!
HTMLElement.getBoundingClientRect()方法
返回值为:{top:xx, right:xx, bottom:xx, left:xx, width:xx, height:xx}
也就是说,一个元素的位置信息都给了,我们要做的就是:

var box = (e.target || e.srcElement).getBoundingClientRect(), 
offsetX = e.clientX - box.left, 
offsetY = e.clientY - box.top;

经测试,所有浏览器都和event.offsetX, event.offsetY保持一致(当然FF除外)

我的例子中,最后还检测了scrollLeft, scrollTop, clientLeft, clientTop,本来以为它们几个会作怪,可测试结果表明:
除了scrollTop,其他都是0(当然scrollLeft是因为没出现横向滚动条所致)
scrollTop各浏览器表现不尽相同,如下:
body.scrollTop的情况

IE, FF, Opera:0

Chrome, Safari:向上滚动的距离
documentElement.scrollTop的情况

IE, FF, Opera:向上滚动的距离

Chrome, Safari:0

Javascript 相关文章推荐
js 事件小结 表格区别
Aug 13 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
innerText 使用示例
Jan 23 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
javascript事件模型介绍
May 31 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
js实现导航跟随效果
Nov 17 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 #Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 #Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 #Javascript
jquery tab插件精简版分享
Sep 10 #Javascript
javascript语言结构小记(一)
Sep 10 #Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 #Javascript
You might like
Content-type 的说明
2006/10/09 PHP
php下删除字符串中HTML标签的函数
2008/08/27 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
Symfony查询方法实例小结
2017/06/28 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
学习vue.js计算属性
2016/12/03 Javascript
详解jQuery uploadify文件上传插件的使用方法
2016/12/16 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python实现TCP文件传输
2020/03/20 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
售后服务承诺书怎么写
2014/05/21 职场文书
金融保险专业求职信
2014/09/03 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
年底个人总结范文
2015/03/10 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
微信小程序基础教程之echart的使用
2021/06/01 Javascript