總結:
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 id="t1" style="margin:2px; padding:5px ; border:4px solid #eeeeee; width:100px; height:200px; overflow:scroll; cursor:pointer;" onclick="testClick('t1')" >
一般的通過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 id="page"></p>
<p id="client"></p>
<p id="scroll"></p>
<p id="screen"></p>
<p id="offset"></p>
<p id="layer"></p>
<div class="div2">
<div class="div3" onclick="test2(event)"></div>
</div>
<p id="eventXY"></p>
<script type="text/javascript">
function test2(e){
e = e || window.event;
//設置或獲取鼠標指針位置相對於父文檔的 x , y像素坐標。
$("#eventXY").html("X:"+e.x+"----- Y:"+e.y);
}
function test(e){
console.log("1111");
console.log(e);
e = e || window.event;
var pageX=e.pageX;
var pageY=e.pageY;
var clientX=e.clientX;
var clientY=e.clientY;
var scrollLeft=document.body.scrollLeft;
var scrollTop=document.body.scrollTop;
console.log(document.documentElement.scrollLeft);
console.log(document.documentElement.scrollTop);
//鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化
//pageX,pageY,在ie7，ie8下都是undefined,在ie9，chrome,ff下可以取到值
//在ie下，PageY=clientY+scrollTop-clientTop;以下為兼容代碼
//包括滾動條
/*if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
event.pageX = event.clientX +
(doc && doc.scrollLeft || body && body.scrollLeft || 0) -
(doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = event.clientY +
(doc && doc.scrollTop || body && body.scrollTop || 0) -
(doc && doc.clientTop || body && body.clientTop || 0);
}*/
$("#page").html("pageX:"+pageX+"---- pageY:"+pageY+"<br/>");
//鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.
//不包括滾動條
$("#client").html("clientX:"+clientX+"---- clientY:"+clientY);
//滾動條滾動的距離
$("#scroll").html("scrollLeft:"+scrollLeft+"----- scrollTop:"+scrollTop);
//鼠標在屏幕上的位置,從屏幕左上角開始
$("#screen").html("screenX:"+e.screenX+"----- screenY:"+e.screenY);
//ie,chrome支持，ff不支持此屬性，鼠標相比較於觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點
$("#offset").html("offsetX:"+e.offsetX+"----- offsetY:"+e.offsetY);
//ie9,chrome,FF都支持此屬性，ie7,8,不支持此屬性，
//鼠標相比較於當前坐標系的位置,即如果觸發元素沒有設置絕對定位或相對定位,
//以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的border區域的左上角為參考點
$("#layer").html("layerX:"+e.layerX+"----- layerY:"+e.layerY);
}
</script>
</body>
</html>