screenX：參照物为电脑的屏幕左上角，距离电脑屏幕的水平距离

clientX：參照物是内容区域左上角，距离内容区域左上角的水平距离，会随着滚动栏的移动而移动

pageX：參照物也是内容区域的左上角。距离内容区域左上角的水平距离，可是不会随着滚动栏的移动而移动

pagex，screenx，clientx的差别的更多相关文章

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

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

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

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

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

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

  4. 理解screenX clientX pageX概念

    先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX: 跟s ...

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

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

  6. 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

    总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...

  7. [转]pageX、clientX、screenX、offsetX、layerX、x

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

  8. clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

    clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106  ...

  9. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...

随机推荐

  1. PCB 无需解压,直接读取Zip压缩包指定文件 实现方法

    最近有一项需求,将电测试点数后台批量写入到工程系统流程指示中,而电测试文件存在压缩包中,压缩包存在公共网络盘 示例图: 一.采用原始方法(4步完成): 第1步:.网络盘ZIP拷到本地, 第2步:解压Z ...

  2. go-swagger的简单使用

    一.下载go-swagger go-swagger 官方下载 根据不同个的操作系统选择对应的 二.添加环境变量 2.1 window swagger_windows_amd64.exe 将swagge ...

  3. B - Chat room

    Problem description Vasya has recently learned to type and log on to the Internet. He immediately en ...

  4. JavaScript中变量的类型

    变量的类型是指变量的值所属的数据类型,可以是数值型.字符串型和布尔型等,因为JavaScript是一种弱类型的程序语言,所以可以把任意类型的数据赋值给变量. 下面是一个关于变量类型的例子.在这个例子中 ...

  5. APP开发中的弹窗体系，UI设计师不能忽视的地方

    1. 弹窗的定义 弹窗分为模态弹窗和非模态弹窗两种. 弹窗分类 模态弹窗:很容易打断用户的操作行为,用户必须回应,否则不能进行其他操作. 非模态弹窗:不会影响用户的操作,用户可以不对其进行回应,非模态 ...

  6. js 如何给标签增加属性

    <html> <head> <meta charset="UTF-8"> <title></title> </he ...

  7. C#判断文件是否存在 //创建txt文件

    if(System.IO.File.Exists(@"")) { } if (System.IO.File.Exists(HttpRuntime.AppDomainAppPath ...

  8. 新浪某个tab 页模仿

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. React Native未来导航者：react-navigation 使用详解

    该库包含三类组件: (1)StackNavigator:用来跳转页面和传递参数 (2)TabNavigator:类似底部导航栏,用来在同一屏幕下切换不同界面 (3)DrawerNavigator:侧滑 ...

  10. 安卓 九宫格 GridView 的表格布局

    首先,请大家理解一下“迭代显示”这个概念,这个好比布局嵌套,我们在一个大布局里面重复的放入一些布局相同的小布局,那些重复的部分是由图片和文字组成的小控件,图片在上方,文字在下方,之后我们只需要把这些小 ...