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=" ...
随机推荐
- linux之SQL语句简明教程---CONCATENATE
有的时候,我们有需要将由不同栏位获得的资料串连在一起.每一种资料库都有提供方法来达到这个目的: MySQL: CONCAT( ) Oracle: CONCAT( ), || SQL Server: + ...
- nyoj 325 zb的生日（dfs）
描述今天是阴历七月初五,acm队员zb的生日.zb正在和C小加.never在武汉集训.他想给这两位兄弟买点什么庆祝生日,经过调查,zb发现C小加和never都很喜欢吃西瓜,而且一吃就是一堆的那种,zb ...
- php算法之快速排序
/** * 快速排序 * 原理: * 快速排序使用分治法(Divide and conquer)策略来把一个串行(list)分为两个子串行(sub-lists). * 最差时间复杂度 O(n*n) * ...
- jsp验证码页面笔记
首先在网上搜了下jsp生成验证码的代码,如下: package com.servlet; import java.awt.Color; import java.awt.Font; import jav ...
- 3-07. 求前缀表达式的值（25） (ZJU_PAT数学)
题目链接:http://pat.zju.edu.cn/contests/ds/3-07 算术表达式有前缀表示法.中缀表示法和后缀表示法等形式.前缀表达式指二元运算符位于两个运算数之前,比如2+3*(7 ...
- HTML5新特性学习-1
本文在于巩固基础 新特性:音频的使用 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- HTML——JAVASCRIPT——关灯效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WindowsForm界面 运行顺序 Form属性
WindowsForm界面 运行顺序 Form属性 什么是类:1 类是面向对象编程的基本单元.类包含了两个成员 字段(Field)和方法方法(Method) 2 字段即变量 方法即函数什么是字段:字段 ...
- js问题学习
1.前言为了node.js做准备,js的基本功还是很重要的.所以正值1024程序员节的时候所以找了些题目,整理了一下知识点.这篇文章感觉代码太多,难免枯燥,所以文章最后留了个彩蛋给读者. 2.简单回调 ...
- PHP 数组和对象的相互转化
对象和数组的相互转化在开发中也是很常见,一般不是多维的情况下直接(array)和(object)就可搞定了,多维的话,遍历下也就可以了: 1 <?php 2 class test 3 { 4 p ...