• clientY 指的是距离可视页面左上角的距离
  • pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
  • screenY 指的是距离屏幕左上角的距离
  • layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
  • offsetY 指的是距离它自己左上角的距离

一张图带大家简单了解了解

在我们简单了解完这些个属性以后，有几个属性需要分清。

  相同点 不同点
clientY 距离页面左上角距离 受页面滚动的影响
pageY 距离页面左上角的距离 不受页面滚动影响
  相同点 不同点
layerY 距离元素的左上角距离 受元素的定位的影响，会从本元素往上找到第一个定位的元素的左上角
offsetY 距离元素左上角的距离 计算相对于本元素的左上角，不在乎定位问题，计算的是内交点。是IE浏览器的特有属性

相关链接：https://segmentfault.com/a/1190000014572113#articleHeader3

　　　　　https://www.cnblogs.com/cheerfulCoder/p/4314267.html

　　　　　https://blog.csdn.net/qq_33036599/article/details/81224346

作者：smile.轉角

QQ：493177502

【js】clientY pageY screenY layerY offsetY的区别的更多相关文章

  1. 分清clientY pageY screenY layerY offsetY的区别

    分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行 ...

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

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

  3. 关于鼠标事件的screenY,pageY,clientY,layerY,offsetY属性 （详细图解）

    screenY 鼠标相对于显示器屏幕左上角的偏移 pageY 鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响) IE9之下并不支持这个属性 但是可以写点代码计算出来. jQuery中的实现: / ...

  4. JavaScript 中事件对象参数：clientX、clientY、offsetX、offsetY、screenX、screenY

    JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...

  5. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

  6. JS中的== 、===的用法和区别。

    JS中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而  === 和 !== 只有在相同类型下,才会比较其值 ======= ...

  7. [Ext JS 4] contentEL,renderTo, applyTo 释义与区别

    前言 若干年前,使用Ext JS 3 开发了一个系统. 随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 : Ext JS 4 较Ext JS 3 有较大的改变. Ext JS ...

  8. JS中三目运算符和if else的区别分析与示例

    本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家.   今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代 ...

  9. js中callback.call()和callback()的区别

    js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello! ...

随机推荐

  1. Android 中更新 UI 的四种方式

    runOnUiThread handler 的 post handler 的 sendMessage View 自身的 post

  2. Rose的四种视图模型

    用例视图 用例视图中包括了系统中的所有参与者.用例和用例图,必要时还可以在用例视图中添加顺序图.活动图等 逻辑视图 逻辑系统关注系统是如何实现用例中所描述的功能的,主要是对系统功能性需求提供支持,即为 ...

  3. spring cloud之Eureka

    Region 表示aws的地理位置,一个region有多个awailability zone,各region间完全隔离.这种方式实现最大的容错和稳定性. spring cloud 默认使用的regio ...

  4. c++ STL之unordered_map

    1.1 特性 关联性:通过key去检索value,而不是通过绝对地址(和顺序容器不同) 无序性:使用hash表存储,内部无序 Map : 每个值对应一个键值 键唯一性:不存在两个元素的键一样 动态内存 ...

  5. idea中maven右键没有show dependencies选项

    如图,idea高版本(2018.3.4)中maven 的右键没有show dependencies菜单 查看依赖包方法,双击pom.xml文件,在文件编辑页面右键maven或者diagrams弹出依赖 ...

  6. 重点做EUR/USD、EUR/JPY、GBP/USD。

    这三种货币对,几乎每天都有合适的行情.

  7. LeetCode.1200-最小绝对值差(Minimum Absolute Difference)

    这是小川的第次更新,第篇原创 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第268题(顺位题号是1200).给定一个由不同的整数组成的数组arr,找到所有对元素,其中任意两个元素的绝 ...

  8. MySQL知识篇-SQL1

    1 SQL是什么? 答:是结构话语言,是一种操作关系型数据库的语言. 2 SQL语言分类? SQL语言 说明 举例 DDL 数据定义语言 create  drop DML 数据操作语言 insert ...

  9. Kettle作业的自带定时任务

    文章出处:https://blog.csdn.net/jianlong727/article/details/53966286 7.1.新建作业 7.2.部署作业 在“核心对象”中拖拽两个图标到执行区 ...

  10. 10.hive安装

    上传hive安装包并解压 给hive设置一个软链接 给hive配置环境变量 sudo vim /etc/profile #hive export HIVE_HOME=/opt/modules/hive ...