• 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 279. 完全平方数（Perfect Squares）

    题目描述 给定正整数 n,找到若干个完全平方数(比如 1, 4, 9, 16, ...)使得它们的和等于 n.你需要让组成和的完全平方数的个数最少. 示例 1: 输入: n = 12 输出: 3 解释 ...

  2. Notepad++格式化xml（转）

    转自:http://www.herongyang.com/XML/NPP-XML-Tools-Plugin-Download-and-Install.html Downloading and inst ...

  3. Bootstrap视频教程

    一.全局CSS样式 0.课件 001.概览_栅格系统 2.排版和代码 3.表格和按钮 4.表单 5.图片 6.辅助类 7.响应式工具 二.组件 8.图标_下拉菜单_按钮组 9.输入框组 10.导航 1 ...

  4. 移动端——meta标签

    meta标签主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用. <meta http-equiv="Content-type" conte ...

  5. Ubuntu防火墙常用命令

    Ubuntu默认防火墙安装.启用.配置.端口.查看状态相关信息 最简单的一个操作: sudo ufw status(如果你是root,则去掉sudo,ufw status)可检查防火墙的状态,我的返回 ...

  6. Python统计分析可视化库seaborn(相关性图，变量分布图，箱线图等等)

    Visualization of seaborn  seaborn[1]是一个建立在matplot之上,可用于制作丰富和非常具有吸引力统计图形的Python库.Seaborn库旨在将可视化作为探索和理 ...

  7. Linux (Ubuntu)安装svn

    1 先查看是否已经安装了svn 如果没有安装svn则: ubuntu@ip----:~$ svn --version The program 'svn' is currently not instal ...

  8. mysql innodb阻塞分析

    http://blog.csdn.net/hw_libo/article/details/39080809

  9. java数据结构之LinkedHashMap

    一.LinkedHashMap源码注释 public class LinkedHashMap<K,V> extends HashMap<K,V> implements Map& ...

  10. centos7.2 apollo1.7.1的搭建

    1.准备工作 第一步:linux系统中配置好java环境安装参考地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-down ...