• 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. Python datetime库计算两个时间点之间的分钟（秒、天）数

    计算两个时间点之间的分钟数 import datetime def minNums(startTime, endTime): '''计算两个时间点之间的分钟数''' # 处理格式,加上秒位 start ...

  2. 可插拔式后台管理系统（Django）

    1.实现效果 研究了下django admin的功能,自己实现了一个简单的可插拔式后台管理系统,方便自定义特殊的功能,而且作为一个独立单独的django app,可以整体拷贝到其他项目中作为后台数据管 ...

  3. React入门----基础篇

    React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做 ...

  4. 搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度.滚动.位置相关的属性,单凭单词很难搞清楚分 ...

  5. MySQL主从双向同步

    最近部署测试环境,涉及到MySQL数据库主从双向同步的部署,记录一下部署过程,正常读写都发生在主库,从库作为备选数据库(热备份),当主库发生异常,数据库自动切换到从库,这里面是怎么监控数据库异常并触发 ...

  6. Linux高级命令 ==> find、grep、sed、awk

    一.find find命令用来在指定目录下查找文件.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录和文件全部进行显示. 语法 find path ...

  7. nohup 不废话应用

    后台运行 nohup ./hello > myout.file 2>&1 & 本界面可以通过 jobs -l 查看后台 top 也能找到PID号 杀进程 kill PID

  8. MongoDB 有关实体映射具体应用及对查询的影响

    1 创建实体的时候,可以用注解@Document 对实体进行设置,指定集合名字 /** * */ package com.cfj.ceshi.entity; import org.springfram ...

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

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

  10. jQuery,javascript获得网页的高度和宽度【收藏】

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offset ...