clientX,pageX,screenX，offsetLeft，scrollTop
出处：点击打开链接
一直不太明白，今天看了一下，感觉挺详细，先转载过来。。。。。。。
clientX
观点：鼠标相对于WINDOWS的坐标。
这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height
证明：点击获得clientX,clientY的大小，设置为图片定位的位置。
如果上面观点不成立，也就是这个坐标不是浏览器范围内的，例如是相对DOCUMENT的，那么鼠标在很远处点击的时候，你会看到图片跑到鼠标点击的地方，事实上，它起码会保持在浏览器的边上。所以观点成立！
通过下面例子说明，鼠标点击获得
<!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">
*{ margin:0; padding:0;}
html{ width:3000px;}
#img{ position:absolute;}
</style>
</head>
<body>
111
<img id = 'img' src="images_photo/1.jpg" width="200"height="150" alt=" " />
<script type="text/javascript">
var oImg = document.getElementById('img');
document.onclick = function(e){
e = e || event;
x = e.clientX;
y = e.clientY;
oImg.style.left = x + 'px';
oImg.style.top = y + 'px';
}
</script>
</body>
</html>
当我们移动鼠标到滚动条很远的位置时，你会发现你的操作将会像是个遥控器一般，操作的位置也不断改变，但是始终不能突破滚动条最左边时候，最右边的点的那个点，而且你会发现当你此时刻鼠标点到最右边的时候，具体图片位置停留在第一屏时候的最右远点，当你往回，距离滚动条此刻位置浏览器窗口右边100PX时候，图片也往回走了100px。这就是这个属性的秘密吧！
pageX
这个东西是相对于DOCUMENT的。只是IE678不支持，IE9支持！
例子如下：
上面的代码稍微改一下：
x = e.pageX;
y = e.pageY;
screenX
相对于屏幕的，虽然没多大用吧!
同样可以修改代码：
x = e.screenX;
y = e.screenY;
offsetLeft
这个是表示对象定位的坐标，而非鼠标事件的坐标！
如果设置定位非STATIC的元素，那么就是相对于他们的位置！而应该注意也不全是定位的距离，而是物体offsetWidth的周围起，也就是说要加上左外边距的距离！
例子如下：
<!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">
*{ margin:0; padding:0;}
html{}
#img{ position:absolute;}
</style>
</head>
<body>
<div style="position:absolute; left:200px; width:500px; height:500px;margin:0 auto; background-color:red;">
111
<img id = 'img' src="images_photo/1.jpg" width="200"height="150" alt=" " />
<div>
<script type="text/javascript">
var oImg = document.getElementById('img');
var style = oImg.style;
document.onclick = function(e){
e = e || event;
x = e.clientX;
y = e.clientY;
oImg.style.left = 100 + 'px';
oImg.style.top = y + 'px';
alert(oImg.offsetLeft);
}
</script>
</body>
</html>
clientLeft
表示从内边距起，到元素自身的offsetLeft的终点位置或者说是起点的位置，取决于你是从左往右算，还是从右往左算。那么就是到滚动条，或者边框的地方。其实我想寻找到滚动条的位置，于是设置了左边框，但是突然发现只有LEFT而没有RIGHT，所以这种情况不会出现，所以应该能说明，就是边框的距离！
看看这个例子：
<!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">
*{ margin:0; padding:0;}
html{}
#img{ position:absolute; margin-left:10px; border-left:10px solid #fff;padding-left:10px;}
</style>
</head>
<body>
<div style="position:absolute; left:200px; width:500px; height:500px;margin:0 auto; background-color:red;">
111
<img id = 'img' src="images_photo/1.jpg" width="200"height="150" alt=" " />
<div>
<script type="text/javascript">
var oImg = document.getElementById('img');
var style = oImg.style;
document.onclick = function(e){
e = e || event;
x = e.clientX;
y = e.clientY;
oImg.style.left = 100 + 'px';
oImg.style.top = y + 'px';
alert(oImg.clientLeft);
}
</script>
</body>
scrollTop
给出元素已经滚动的距离（像素值）。当你设置这些属性的时候，页面滚动到新坐标。
解释：像素值表示这个值的单位是px。如果你设置值为100px，那么不会生效，因为值的单位已经有默认了，你只需要用‘100’。
layerX\offsetX
不被所有浏览器支持。只在你想要取得一个元素相对于它的绝对定位的父元素的位置时有用处。
var x = [the element];
var pos = x.layerX || x.offsetX;
clientX,pageX,screenX，offsetLeft，scrollTop的更多相关文章
- 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...
- 理解clientWidth，offsetWidth，clientLeft，offsetLeft，clientX，offsetX，pageX，screenX
1. clientWidth:表示元素的内部宽度,以像素计.该属性包括内边距,但不包括垂直滚动条(如果有).边框和外边距.(clientWidth = width + padding) 2. offs ...
- CSSOM视图模式(CSSOM View Module)相关整理：scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别
转:http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-mo ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
- 一张图看懂offsetX, clientX, pageX, screenX的区别
1.具体含义见下图1 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 ...
- 扒一扒offsetleft，srollleft，pagex，clientx，postion().left等精确位置的获取与理解
先上个pc端和手机端的图: 说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class=" ...
随机推荐
- poj 2704 Pascal's Travels_记忆化搜索
一道简单但是题意蛋疼的题目 题意:给你个n*n的图,开始在左上角,要求走到右下角有多种走法,图上的数表示走几步,只能向右或向下走. #include<iostream> #include& ...
- ROW_NUMBER() OVER函数的基本用法用法【转】
语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的ROW ...
- as3 页游中，新手指导中，屏蔽所有交互对象，但除了指定交互对象可用的方法【转http://blog.csdn.net/linjf520/article/details/9450945】
package { import flash.display.InteractiveObject; import flash.display.Stage; import flash.events.Mo ...
- Android_Layout_xml布局
本博文为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/11840079 1.构建xml布局文件 使用android提供的xml ...
- oracle子查询
子查询:在一个查询的内部包含另外一个查询. 普通子查询 -- 查询出比7654工资还高的所有雇员的信息 select * from emp e where e.sal > (select sal ...
- the first has precedence, perhaps you need a NameVirtualHost directive
报错信息1: Starting httpd: [Fri May 19 11:49:42 2011] [warn] VirtualHost 127.0.0.1:80 overl aps with Vir ...
- Bostonkey Simple calc
Simple Calc 明显的memcpy栈溢出,是一个静态链接的程序所以没给libc.发现里面有: 参数a1应该为_libc_stack_end的地址了._stack_prot通过rop修改为0x7 ...
- Hadoop书籍下载链接
Hadoop书籍推荐1:Hadoop实战(结合经典案例全面讲解hadoop整个技术体系)http://www.db2china.net/club/thread-25148-1-1.html2:Hado ...
- javascript——touch事件介绍与实例演示
分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...
- C#面向对象 基础概念25个
1.静态成员和非静态成员的区别?2.const 和 static readonly 区别?3.extern 是什么意思?4.abstract 是什么意思?5.internal 修饰符起什么作用?6.s ...