分清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. QT的mouseMoveEvent事件失效

    void TalkWindow::enterEvent(QEvent *event){ grabMouse();}void TalkWindow::leaveEvent(QResizeEvent *e ...

  2. Mysql学习---SQL语言的四大分类

    SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHE ...

  3. java之Pattern.compile相关正则表达式

    java之Pattern.compile相关正则表达式 1.验证邮箱地址是否正确:String check = "^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([ ...

  4. AutoHotkey批量L版代码转H2的vim脚本

    原脚本尽量用表达式的语法写,错误会比较少,比如"If a=", "fun(a=1)"这种语法在V2会出错文件放vim的autoload目录下,可使用以下map使 ...

  5. ZT-Android深入浅出之Binder机 制

    转贴 不是原创! Android深入浅出之Binder机 制 一说明 Android系统最常见也是初学者最难搞明白的就是Binder了,很多很多的Service就是通过Binder机制来和客户端通讯交 ...

  6. 用w32tm设置服务器时间同步

    服务器时间同步是一个容易被忽视的问题,但在企业级应用环境中,不同服务器之间的时间差很可能引发应用系统问题.Windows提供的w32tm程序可以用来设置时间同步服务器,其用法如下: 1.指定外部时间源 ...

  7. jemter 使用if控制器，选择需要的内容

    背景:需要根据人员传入的变量,来选择运行的环境,调用不同的参数,进行拼接,使用到if控制器 取到的数据,调用的就是test1的数据

  8. Android进阶笔记17：Android手机屏幕坐标系

    1. 手机屏幕坐标系: 整个坐标系是以手机屏幕左上角为原点(0,0),如下:

  9. JavaScript小游戏--2048（PC端）

    1.初始化棋局 $(document).ready(function() { prepare_for_mobile(); //适配移动端 new_game(); }); 2.开始新游戏 functio ...

  10. python-装饰器的简单使用

    一.介绍 首先我们先来看一个简单的例子,在基础平台中有一个home()和tv()函数,在业务平台中调用此函数时,给出了响应的打印内容: 基础平台: def home(): print('welcome ...