分清clientY pageY screenY layerY offsetY的区别

在我们想要做出拖拽这个效果的时候，我们需要分清这几个属性的区别，这几个属性都是计算鼠标点击的偏移值，我们需要对其进行了解才可以继续实现我们的拖拽效果

clientY 指的是距离可视页面左上角的距离
pageY 指的是距离可视页面左上角的距离(不受页面滚动影响)
screenY 指的是距离屏幕左上角的距离
layerY 指的是找到它或它父级元素中最近具有定位的左上角距离
offsetY 指的是距离它自己左上角的距离

原文地址：
http://www.php.cn/xiaochengxu-400674.html

分清clientY pageY screenY layerY offsetY的区别的更多相关文章

  1. 【js】clientY pageY screenY layerY offsetY的区别

    clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近 ...

  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. 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

    总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当 ...

  6. JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY

    clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包 ...

  7. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  8. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  9. javascript获取窗口位置、绝对位置、事件位置等

    有段时间没更新博客了,工作实在太忙了,加班加班再加班就是我们这个行业的常态吧...还好最近把工作进度完成了,终于有些空余时间了.关于<Javascript高级程序设计>系列,我并没有弃坑, ...

随机推荐

  1. Oracle案例04——ORA-39700: database must be opened with UPGRADE option

    Oracle11.2.0.3数据库通过rman备份到Oracle11.2.0.4上做还原,报需要升级的错误,具体处理步骤如下: 一.错误信息 SQL> alter database open r ...

  2. January 25 2017 Week 4 Wednesday

    In every triumph, there's a lot of try. 每个胜利背后都有许多尝试. There's a lot of try behind every success, and ...

  3. Beta版本 为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 == Dec 25。

    Beta版本 软件的测试版本,经常在各类著名软件中的前期发布版本的后缀中可见,包括大名鼎鼎的windows系统,这个阶段的版本一直加入一些新的功能. 软件测试可分为alpha测试.beta测试和联合测 ...

  4. sql2005 和 mysql 定时备份批处理

    保存为sqlbak.bat  目录我直接放winrar 的根目录了 或者拷贝一个winrar.exe 具体目录随意. 然后添加计划任务个人的话建议一周或者一天 虚拟主机等 建议每周或者每月 @echo ...

  5. vue记录

    vue项目中使用默认图片代替异常图片 第一种方法 <img onerror="javascript:this.src='../../static/custom.png';" ...

  6. Quarzt定时调度任务

    简介 Quarzt是一个项目中定时执行任务的开源项目,Quartz是OpenSymphony开源组织在Job scheduling领域又一个开源项目,它可以与J2EE与J2SE应用程序相结合也可以单独 ...

  7. C#配置IIS搭建网站的工具类

    public class IISWorker { public static string HostName = "localhost"; /// <summary> ...

  8. 体验了Sublime + Emmet，才体会到原来前端开发可以这么痛快！

    从当初用notepad写出第一个web页面,到现在偶尔使用Editplus做一些HTML5的消遣,不知不觉已经15年了  --! 在这中间,和那些老顽固一样,坚决远离FP.DW那些半自动的前端开发工具 ...

  9. BZOJ4011:[HNOI2015]落忆枫音(DP,拓扑排序)

    Description 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出这样一个问题.  「相信吧.不然我们是什么,一团肉吗?要不是有灵魂……我们也 ...

  10. 四. 引入unittest单元测试框架

    1.   安装 SeleniumIDE(firefox) (1)下载地址:https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/ (2 ...