• 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. 数据库 | Oracle数据库查表空间使用情况

    平时在使用Oracle的时候,如果业务中的数据量激增.数据量变大,很有可能就会有表空间不足的情况,需要重点关注.今天我们分享下如何查看表空间的使用情况. 一.如何查看使用状况 我们废话不说,先直接贴上 ...

  2. WebView加载html实现网页上传本地文件(图片，拍照，语音等)

    前言: 这里有两个方案,第一个使用Andorid客户端和JavaScript互相调用方法来实现,这种方法极力不推荐,它会增加服务端和客户端的开发成本. 第二种就是继承WebViewChromeClie ...

  3. 怎么彻底关闭卸载删除Cortana小娜进程，最简单

    原文地址:https://jingyan.baidu.com/article/90bc8fc8be67bcf653640cfa.html Win10中的Cortana是微软开发的一款个人AI助理,集聊 ...

  4. VBA ListView控件使用实例

    功能:ListView控件实现连接数据库实现显示查询数据空能. 图片: 代码: Private Sub CommandButton1_Click() Dim res As String res = T ...

  5. 转 MySQL: Starting MySQL….. ERROR! The server quit without updating PID file解决办法

    http://blog.sina.com.cn/s/blog_637e04c9010117ri.html 1 问题 [root@localhost mysql]# /etc/rc.d/init.d/m ...

  6. docker 搭建私有云盘 Seafile

    缘起 现如今各种云存储服务其实挺多的,国外有经典的DropBox.Google Drive.微软的OneDrive等,国内也有可以免费使用的各种云. 那么为什么想要搭建私有云存储呢?主要是本着“自己的 ...

  7. const成员变量

    #include <iostream> using namespace std; class A { public: A(int size) : SIZE(size) {}; privat ...

  8. VS Code中内置终端运行C中文乱码问题

    环境:Win10 + VS Code + Code Runner插件 原因:VS Code默认文件编码为 UTF-8,生成的可执行文件也是UTF-8编码的,但是系统编码为 GB2312,所以程序中的中 ...

  9. Books Exchange (easy version) 　　CodeForces - 1249B2

    The only difference between easy and hard versions is constraints. There are nn kids, each of them i ...

  10. TypeError: __init__() got an unexpected keyword argument 'serialized_options'

    问题描述: TypeError: __init__() got an unexpected keyword argument 'serialized_options' File "objec ...