getBoundingClientRect()方法

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

包括 ： top , right, bottom, left, width, height等值

 

需要注意的是，IE、Firefox3+、Opera9.5、Chrome、Safari支持，在IE中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，我们需要做个兼容。

 

getClientRects 和 getBoundingClientRect 的区别

返回类型差异：

getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象。
getBoundingClientRect 返回 一个TextRectangle对象，即使DOM里没有文本也能返回TextRectangle对象.

出于浏览器兼容的考虑，现在用得最多的是getBoundingClientRect，经常用来获取一个element元素的viewport坐标。 

var touch = event.touches ? event.touch[0] : event;

var dimensions = touch.target.getBoundingClientRect();

dimensions 来获取点击地点的相对位置，方便进行检测