分清clientY pageY screenY layerY offsetY的区别
分清clientY pageY screenY layerY offsetY的区别
在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可以继续实现我们的拖拽效果
clientY 指的是距离可视页面左上角的距离
pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
screenY 指的是距离屏幕左上角的距离
layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
offsetY 指的是距离它自己左上角的距离
原文地址:
http://www.php.cn/xiaochengxu-400674.html
分清clientY pageY screenY layerY offsetY的区别的更多相关文章
- 【js】clientY pageY screenY layerY offsetY的区别
clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近 ...
- 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 ...
- 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY
总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...
- JavaScript 中一些概念理解 :clientX、clientY、offsetX、offsetY、screenX、screenY
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...
- JS实现拖动div层移动
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,pageY,layerX,layerY,clientX,clientY,screen ...
- Javascript事件模型系列(一)事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- javascript获取窗口位置、绝对位置、事件位置等
有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑, ...
随机推荐
- spring-springmvc code-based
idea设置maven在下载依赖的同时把对应的源码下载过来.图0: 1 主要实现零配置来完成springMVC环境搭建,当然现在有了springBoot也是零配置,但是很多同仁都是从spring3.x ...
- QT的组合键
https://www.cnblogs.com/Jace-Lee/p/5859293.html
- 常用的邮箱服务器(SMTP、POP3)地址、端口
sina.com: POP3 服务器地址:pop3.sina.com.cn(端口:110) SMTP 服务器地址:smtp.sina.com.cn(端口:25) sinaVIP: POP3 服务器:p ...
- 《React 与 Redux 开发实例精解》出版了!
<React 与 Redux 开发实例精解>出版了! <React 与 Redux 开发实例精解>出版了! 关于 React 与 Redux React 与 Redux, 一个 ...
- 玩转Metasploit系列(第一集)
"如果我有七个小时的时间来砍树,那么我一定会花6个小时来磨我的斧头." –Abraham Lincoln ??这句话一直引导着我做事的思路,而且从未改变过.这篇文章翻译自Offen ...
- multiGet(下载软件)
下载软件 apt-get install multiGet
- Spring 的下载、安装和使用
一.下载 Spring 下载地址:http://repo.spring.io/libs-release-local/org/springframework/spring/4.0.6.RELEASE/ ...
- Django应用的打包和应用的安装和卸载
将应用打包需要安装: setuptools 安装和卸载应用需要安装: pip 举例polls是一个应用包. polls文件夹中包含所有有关应用的文件. 打包应用: 首先,在你的Django项目之外,为 ...
- Androidannotation使用之@Rest获取资源及用户登录验证(一)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/NUPTboyZHB/article/details/24384713 简介: 上一篇博文简单的介绍了 ...
- tmux分屏
网上很多教程: 新手教程: tmux进入 ctrl + b 命令 % 纵向分屏 命令 方向键 切换 https://lukaszwrobel.pl/blog/tmux-tutorial-split-t ...