• 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. LeetCode 132. 分割回文串 II（Palindrome Partitioning II）

    题目描述 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回符合要求的最少分割次数. 示例: 输入: "aab" 输出: 1 解释: 进行一次分割就可将 s ...

  2. Flutter移动电商实战 --（12）首页导航区域编写

    1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重 ...

  3. 1753 -- Flip Game

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 48663   Accepted: 20724 Descr ...

  4. linux中安装python

    1.首先切换目录 大型的软件一定要安装在/ opt中  规范 cd /opt 2.下载python3的源码 wget https://www.python.org/ftp/python/3.6.2/P ...

  5. 为macos开启外接显示器hdpi分辨率

    安装了Switch RES,但是缺少当前显示器合适的HDPI分辨率的时候,可以参考这里,自动生成合适的配置文件. https://comsysto.github.io/Display-Override ...

  6. grep 正则表达式用引号括起来和元字符加反斜杠转义的测试

    grep 正则表达式用引号括起来和元字符加反斜杠转义的测试 实验在 grep 命令中的表达式:不加引号,加单引号,加双引号的区别,以及部分元字符前加与不加 `\’ 进行转义的区别.实验环境为“实验楼( ...

  7. Springboot--关于使用webapp目录

    前我在学习springBoot集成springMVC的时候发现webapp目录, 1. 直接右键运行,访问不到页面,原来并不是不支持啊,只是默认没有把它放在编译路径里面. 我们可以在项目的packag ...

  8. matlab之编写函数m文件计算排列组合Cnm

    function y=myfun(n) y=1; for i in 1:n; y=y*(m-i+1)/i; end 给y赋初值 给i遍历 计算每一项的乘积之和 注意:要保存函数的名字为myfun,因为 ...

  9. Netcat—瑞士军刀

    netcat是网络工具中的瑞士军刀,它能通过TCP和UDP在网络中读写数据.通过与其他工具结合和重定向,你可以在脚本中以多种方式使用它.使用netcat命令所能完成的事情令人惊讶. netcat所做的 ...

  10. ReDOS攻击

    正则表达式拒绝服务攻击(Regular Expression Denial of Service)当开发人员编写的正则表达式存在缺陷时,攻击者可以构造特殊的字符串来大量消耗服务器资源,最终造成拒绝服务 ...