JavaScript中offset与scroll系列属性详解及iOS触摸事件处理

 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js位子表示</title>
<script type="text/javascript">
function testClick(oDiv){
var oDivId=document.getElementById(oDiv);
alert("offsetHeight:"+oDivId.offsetHeight+"\n offsetWidth:"+oDivId.offsetWidth+"\n offsetLeft:"+oDivId.offsetLeft+"\n offsetRight:"+oDivId.offsetLeft+"\n offsetTop:"+oDivId.offsetTop
+"\n offsetParent:"+oDivId.offsetParent +"\n scrollHeight:"+oDivId.scrollHeight+"\n scrollWidth:"+oDivId.scrollWidth+"\n scrollTop:"+oDivId.scrollTop+"\n scrollLeft:"+oDivId.scrollLeft+"\n " );
} 
</script>
</head>
<body style="margin:0; padding:0;">
<div style="width:300px; height:300px; padding:2px; margin:3px;">
<div id="t1" style="margin:1px; padding:4px ; border:3px solid #eeeeee; width:100px; height:200px; overflow:scroll; cursor:pointer;" onclick="testClick('t1')" >
常规的拖动效果通常基于mousedown、mousemove和mouseup事件构建，这类实现仅在标准键盘与鼠标的桌面设备上运行良好。然而，在iOS设备（如iPhone、iPod Touch和iPad）上，这些事件无法正常工作。近期因项目需求需兼容iOS设备，因此研究了WebKit浏览器中的触摸事件机制。
实现过程相对直接，对应鼠标事件的触摸事件分别为touchstart、touchmove和touchend。为了编写演示代码耗费了较多时间，故此处省略详细过程，仅展示相关核心代码。
</div>
</div>
</body>
</html>

在IE9、Chrome及Firefox等浏览器中，表现基本一致：

（返回元素的高度和宽度，以像素为单位，包含内边距）：

200+4+4+3+3=214（自身高度200加上上下各4的内边距，以及上下各3的边框宽度，注意不包含外边距）

offsetWidth（返回元素的高度和宽度，以像素为单位，包含内边距）：

100+3+3+4+4=114，计算逻辑同上

（返回当前元素的左边界到其包含元素左边界的偏移量，以像素为单位）：

2+3+1=6（在IE6下为3）（父级div的内左边距2加上父级div外左边距3，再加上子div的左外边距1，注意这里子div的内边距不会影响offsetLeft的值）

不存在offsetRight这一概念。

offsetTop（返回当前元素的上边界到其包含元素上边界的偏移量，以像素为单位。）

2+3+1=6（在IE6下为2），原理与offsetLeft相同

（返回元素的完整高度和宽度，以像素为单位。当元素拥有滚动条时（例如CSS的overflow属性设置为scroll，若为hidden则仅返回可视区域高度）：

474（div的实际高度由内部文字内容决定，此时overflow属性为scroll）

若设置overflow为hidden，则值为390，超出部分被隐藏

若移除overflow属性，值为390。为何overflow:scroll时值为474？因为该数值还包含了滚动条的高度

（与scrollHeight原理相同）：

当overflow为hidden时，值为108（子div的实际宽度）

当overflow为scroll时，值为90（此处为何不包含滚动条宽度？具体表现可能因浏览器实现而异）

移除overflow属性后，值为108

（返回已滚动到元素左边界或上边界的像素数。仅当元素拥有滚动条时（如CSS overflow属性设置为auto）这些像素值才有意义。这些属性通常在文档的<body>或<html>标记上定义（具体视浏览器而定），用于指定滚动文档的位置。注意，这些属性并不指定<iframe>标记的滚动量）

若未拖动滚动条，默认值为0；

同上