总结:

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>

元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY的更多相关文章

  1. JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别

    首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...

  2. 如何更好的理解（pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY，offsetLeft,style.left）

    1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X ...

  3. js-offsetX、pageX、clientX、layerX、screenX

    真心地我也是懵逼的 clientX,clientY:针对屏幕有效区域,不包括滚动部分,坐标(0,0)一直在有效区域的左上角 X,Y:            针对屏幕有效区域,不包括滚动部分,坐标(0, ...

  4. pageX，clientX，screenX，offsetX的区别

    pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...

  5. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

  6. 扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精确位置的获取与理解

    先上个pc端和手机端的图:   说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class=" ...

  7. JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

    /*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/p ...

  8. pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX-- ...

  9. 【转】pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...

随机推荐

  1. redis有序集合性能 列表、集合、有序集合

    https://www.cnblogs.com/pirlo21/p/7120935.html 1.1 列表 列表(list)类型是用来存储多个字符串,元素从左到右组成一个有序的集合.列表中的每个字符串 ...

  2. WordCount 的实现与测试

    一.开头 (1)合作者:201631062627,201631062427 (2)代码地址:https://gitee.com/catchcatcat/WordCount.git 二.正文 (1)基本 ...

  3. vue的生命周期(lifecycle)

    这边转载一篇文章,个人认为写的不错,代码举了个例子很生动. https://segmentfault.com/a/1190000010336178

  4. VPS常用操作（自用）

    1.screen  用来开启进程,关闭ssh或命令行后扔可以继续运行 screen screen -list screen -r xx screen -S PID -X quit 2.mono asf ...

  5. go不在dock显示运行

    用这种方法就可以了go build -ldflags -H=windowsgui XXX.go

  6. 使用eclipse自动生成WSDL客户端代码

    一.获取WSDL文件 从网上可以搜到一些提供各种服务的免费接口,比如获取天气预报的接口: http://www.webxml.com.cn/WebServices/WeatherWebService. ...

  7. MySQL加锁处理分析（转）

    add by zhj: 非常棒的一篇文章,是我见过的讲加锁最棒最详细的文章了.之前听过网易的<MySQL微专业>,里面的课程讲的也很好,但锁这块讲的跟 这篇文章相比,还是有差距的.网易&l ...

  8. JLRoutes使用

    JLRoutes 地址:https://github.com/joeldev/JLRoutes JLRoutes原理: 它是通过url scheme来实现app内部,web到app,app与app之间 ...

  9. bat实现获取文件每行内容，for循环中运行多条命令

    关键词:bat,bat获取文件内容 1.获取每行内容 @echo offfor /f "delims=" %%i in (config.txt) do (echo "%% ...

  10. ntpdata 同步时间

    ntpdate用来同步时间 [root@localhost ~]# yum install -y ntp [root@localhost ~]# ntpdate time.windows.com # ...