总结:
event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 (可见区域)
event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 （可见区域）
event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 （触发事件的元素,ie,chrome支持此属性，ff不支持）
event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 （触发事件的元素,ie,chrome支持此属性，ff不支持）
event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。(用户屏幕左上角)
event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 (用户屏幕左上角)
event.x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。(ff不支持)
event.y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。(ff不支持)
event.layerX 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,
以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点(未理解)
event.laylerY 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,
以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点(未理解)
event.pageX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域包括窗口自身的控件和滚动条。
event.pageY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域包括窗口自身的控件和滚动条。
var ff_offsetLeft=document.getElementById("div1").offsetLeft;
var ff_offsetTop=document.getElementById("div1").offsetTop;
var ff_offsetX=e.layerX-ff_offsetLeft;
var ff_offsetY=e.layerY-ff_offsetTop;
$("#ff_offset").html("ff_offsetX:"+ff_offsetX+"-----ff_offsetY:"+ff_offsetY);
offsetLeft,如下计算:
<div style="width:300px; height:300px; padding:3px; margin:6px;">
<div >
一般的通过mousedown、mousemove、mouseup等打造的拖动，仅仅在普通的键盘+鼠标的电脑设备上可以工作。而到了ios设备上（iphone itouch ipad），则不能工作了。最近因为做个东西，需要支持ios设备，所以只好看了下webkit浏览器的触摸事件。
其实也很简单，对应mousedown、mousemove、mouseup的触摸事件分别是touchstart、touchmove、touchend。为了写个demo，花了不少的时间，所以为了节省时间，我文章里就不多说了，仅贴一下相关代码。
</div>
</div>
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置;<br/>
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置;<br/>
t1: offsetLeft=3+6+4=13px;<br/>
t1: offsetTop=3+6+4=13px;<br/>
offsetWidth:获取对象的宽度，包括边线;<br/>
offsetHeight:获取对象的高度，包括边线；<br/>
t1: offsetWidth=100+5+5+4+4=118px;<br/>
t1: offsetWidth=200+5+5+4+4=218px;<br/>
以上这段代码，是获得firefox下，鼠标点击的位置，距离触发事件的对象上边界和走边界的距离，只能做减法运算。
var strInfo="";
strInfo+="\r\n网页可见区域宽document.body.clientWidth:"+document.body.clientWidth;
strInfo+="\r\n网页可见区域高document.body.clientHeight:"+document.body.clientHeight;
strInfo+="\r\n网页可见区域宽document.body.offsetWidth:"+document.body.offsetWidth+"(包括边线的宽)";
strInfo+="\r\n网页可见区域高document.body.offsetHeight:"+document.body.offsetHeight+"(包括边线的宽)";
strInfo+="\r\n网页正文全文宽document.body.scrollWidth:"+document.body.scrollWidth;
strInfo+="\r\n网页正文全文高document.body.scrollHeight:"+document.body.scrollHeight;
strInfo+="\r\n网页被卷去的高document.body.scrollTop:"+document.body.scrollTop;
strInfo+="\r\n网页被卷去的左document.body.scrollLeft:"+document.body.scrollLeft;
strInfo+="\r\n网页正文部分上window.screenTop:"+window.screenTop;
strInfo+="\r\n网页正文部分左window.screenLeft:"+window.screenLeft;
strInfo+="\r\n屏幕分辨率的高window.screen.height:"+window.screen.height;
strInfo+="\r\n屏幕分辨率的宽window.screen.width:"+window.screen.width;
strInfo+="\r\n屏幕可用工作区高度window.screen.availHeight:"+window.screen.availHeight;
strInfo+="\r\n屏幕可用工作区宽度window.screen.availWidth:"+window.screen.availWidth;
//console.log(strInfo);
http://chaizhenxing.good.blog.163.com/blog/static/100955996201361715313810/
http://www.jb51.net/article/30303.htm
<!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>元素位置研究</title>
<style type="text/css">
.div1{
width:200px;
height:300px;
background:red;
}
.div2{
width:400px;
height:400px;
background:red;
}
.div3{
width:200px;
height:200px;
background:green;
}
</style>
<script type="text/javascript" charset="utf-8" src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="div1" onmousedown="test(event)"></div>
<p +e.layerY);
}
</script>
</body>
</html>