出处：点击打开链接

一直不太明白，今天看了一下，感觉挺详细，先转载过来。。。。。。。

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的更多相关文章

  1. 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...

  2. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  3. 页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  4. 理解clientWidth，offsetWidth，clientLeft，offsetLeft，clientX，offsetX，pageX，screenX

    1. clientWidth:表示元素的内部宽度,以像素计.该属性包括内边距,但不包括垂直滚动条(如果有).边框和外边距.(clientWidth = width + padding) 2. offs ...

  5. 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 ...

  6. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

  7. 一张图看懂offsetX, clientX, pageX, screenX的区别

    1.具体含义见下图1 2.浏览器的兼任情况

  8. 如何更好的理解（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 ...

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

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

随机推荐

  1. POJ 3368 RMQ-ST

    一直感觉RMQ水,没自己写过,今天写了一道题,算是完全独立写的,这感觉好久没有了... 一直以来,都是为了亚洲赛学算法,出现了几个问题: 1.学的其实只是怎么用算法,对算法的正确性没有好好理解,或者说 ...

  2. MySQL --概述--

    Mysql是最流行的关系型数据库管理,在Web应用方面MySQL是最好的RDBMS:关系数据库管理系统 什么是数据库? 数据库(Database)是按照数据结构来组织,存储和管理数据的仓库. 每个数据 ...

  3. javascript第十七课:this使用

    例如,我们要一个元素的值 function f1(){ alert(this.id); } document.getElementByid('#id').onclick=f1;  //将函数赋值给事件

  4. 乐酷工作室孙志伟：Testin云測试有广度有深度 省钱省力值得信赖

    乐酷工作室孙志伟:Testin云測试有广度有深度 省钱省力值得信赖 2014/10/16 · Testin · 开发人员訪谈 乐酷工作室是一个专业从事移动终端应用及游戏自主研发和运营的创业团队,眼下拥 ...

  5. 将ImageView中的图片保存到本地相冊

    private void SaveImageToSysAlbum() { if (FileUtil.isSdCardExist()) { BitmapDrawable bmpDrawable = (B ...

  6. DG之主库、备库切换（物理备库）

    DG之主库.备库切换 一．开库与关库顺序 开库顺序 先启备库,再启主库(启动监听.打开告警日志) 关库顺序 先关主库,再关备库 二．主备库切换 1.操作过程一览 步骤1:启动备库.监听.告警: 步骤2 ...

  7. sql必知必会(第四版) 学习笔记一

    温习一遍简单的sql语法,把自己掌握还不够的地方,做了些笔记.... 1 去重复关键词,distinct select distinct sname from student; 2 限制结果top的用 ...

  8. 关于常用meta的总结

    入行也半年了,无数次的想过写博客也无数次的想过第一篇会写什么,一直没有落实.今天心血来潮把博客开了,那就写点东西吧.第一篇就写一写看似简单但又经常不注意到的meta标签吧.(博主经验尚浅,有许多理解不 ...

  9. Hadoop 安装 （4） SSH无密码验证配置

    验证SSH 和 RSYNC 已经安装好了 Master 生成密码对以及对于 Slave 的无密码登录. 见:http://www.cnblogs.com/xia520pi/archive/2012/0 ...

  10. IBATIS处理typeHandler类容易范的SQLException总结

    1. java.sql.SQLException: 无效的列类型 原因: A. ibatis的IN,OUT参数.或者typeHandler类中传入的参数值数据类型与Oracle自定义对象中的属性值的数 ...