Heim  >  Artikel  >  Web-Frontend  >  js Event对象的5种坐标_javascript技巧

js Event对象的5种坐标_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:02:251138Durchsuche

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

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

复制代码 代码如下:








空白区

点击





问:怎样获取鼠标相对于浏览器可视文档区域左上角的位置?
答: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
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn