js Event对象的5种坐标_Javascript教程-查字典教程网
js Event对象的5种坐标
js Event对象的5种坐标
发布时间:2016-12-30 来源:查字典编辑
摘要:但是你懂的,浏览器实在太不和谐了,兼容性且不说,各种坐标属性看得人头昏眼花,极容易混淆。好吧,我来总结一下:测试浏览器:IE8,Chrome...

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

测试浏览器: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><>

</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教程学习
    热门Javascript教程学习
    编程开发子分类