【js】clientY pageY screenY layerY offsetY的区别
- 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的区别的更多相关文章
- 分清clientY pageY screenY layerY offsetY的区别
分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行 ...
- JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...
- 关于鼠标事件的screenY,pageY,clientY,layerY,offsetY属性 （详细图解）
screenY 鼠标相对于显示器屏幕左上角的偏移 pageY 鼠标相对于页面左上角的偏移 (其值不会受滚动条的影响) IE9之下并不支持这个属性 但是可以写点代码计算出来. jQuery中的实现: / ...
- JavaScript 中事件对象参数：clientX、clientY、offsetX、offsetY、screenX、screenY
JavaScript 中一些概念理解 :clientX.clientY.offsetX.offsetY.screenX.screenY clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x ...
- 【前端】js中new和Object.create()的区别
js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...
- JS中的== 、===的用法和区别。
JS中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而 === 和 !== 只有在相同类型下,才会比较其值 ======= ...
- [Ext JS 4] contentEL,renderTo, applyTo 释义与区别
前言 若干年前,使用Ext JS 3 开发了一个系统. 随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 : Ext JS 4 较Ext JS 3 有较大的改变. Ext JS ...
- JS中三目运算符和if else的区别分析与示例
本文是通过示例详细分析了JS中三目运算符和if else的区别,是篇非常不错的文章,这里推荐给大家. 今天写了一个图片轮播的小demo,用到了判断 先试了一下if else,代码如下: 复制代码代 ...
- js中callback.call()和callback()的区别
js中callback.call()和callback()的区别在js中callback.call()和callback() 有什么区别,举个例子:function a(){alert('hello! ...
随机推荐
- FreeMarker学习（常用指令）
参考:http://freemarker.foofun.cn/dgui_quickstart_basics.html assign: 使用该指令你可以创建一个新的变量, 或者替换一个已经存在的变量 a ...
- python 格式化输出用户名/密码
格式化输出用户名/密码 内容来自网络 def get_account(num): accounts = [] for index in range(1, num+1): accounts.append ...
- selenium 右侧滚动条操作
对于web上有右侧滚动条的操作 可用使用JS语句执行 拖到底部 js = "var q=document.documentElement.scrollTop=10000"brows ...
- MAC-下安装php-redis扩展
MAC下安装php-redis扩展 下载php-redis,地址:https://nodeload.github.com/nicolasff/phpredis/zip/master 下载完成得到p ...
- [Java]用 MessageFormat 拼接组合字符串
package com.hy; import java.text.MessageFormat; public class Test3 { public static void main(String[ ...
- Thinkphp5 的sesssion在同一个控制器不同的方法无法获取session的原因和对策
这一段在用thinkPHP5开发微信小程序接口的时候,在同一个控制器一个方法中存入session,在另一个方法中取出session,一直都是无法取出. 查阅各种资料得到原因:thinkPHP5里面的s ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-04 SpringCloud微服务核心组件Eureka介绍和闭源后影响
笔记 4.SpringCloud微服务核心组件Eureka介绍和闭源后影响 简介: SpringCloud体系介绍 官方地址:http://projec ...
- 质量保障&&质量体系建设
一.质量保障 先引用一段 百度百科 上对软件质量保障的解释:软件质量保障是建立一套有计划,系统的方法,来向管理层保证拟定出的标准.步骤.实践和方法能够正确地被项目所采用.软件质量保证的目的是使软件过程 ...
- Linux命令行如何返回上一次的目录
千辛万苦进入了一个很深层的目录,一不小心输入了cd并回车 ......... 并不是再进一次,对于bash来说,只需要很管理的一个命令: cd - 该命令等同于cd $OLDPWD,关于这一点在bas ...
- python-爬虫-scrapy
入门: 下载:pip install scrapy 工程:scrapy startproject 工程名 Spider: scrapy genspider 爬虫名 url (--nolog//可选不 ...