分清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. case选择语句

    #!/bin/bash   PS3="please select menu:"   select  i  in "Apache" "Mysql&quo ...

  2. sparsity and density

    转:http://searchdatamanagement.techtarget.com/definition/sparsity-and-density 查了一下定义,以免会写错 Sparsity a ...

  3. php获取视频长度，php.ini配置

    php获取视频长度 $long = exec("ffmpeg -i video.mp4 2>&1 | grep 'Duration' | cut -d ' ' -f 4 | s ...

  4. JavaScript的DOM_节点的增删改

    一.概述 DOM 不单单可以查找节点,也可以创建节点.复制节点.插入节点.删除节点和替换节点.  二.write()方法 write()方法可以把任意字符串插入到文档中去.会覆盖掉原来的html &l ...

  5. [转] 从此不再惧怕URI编码：JavaScript及C# URI编码详解

    混乱的URI编码 JavaScript中编码有三种方法:escape.encodeURI.encodeURIComponent C#中编码主要方法:HttpUtility.UrlEncode.Serv ...

  6. phpstudy mysql 升级5.7.18

    1.从官网下载MySQL http://dev.mysql.com/downloads/mysql/ 2.解压到想安装到的 例如  C:\phpStudy\MySQL 进入该目录,找到my-defua ...

  7. Selenium应用代码（读取excel的内容进行注册的案例）

    1. 封装读取excel数据的方法:import java.io.*;import java.util.ArrayList;import java.util.List; import jxl.*;im ...

  8. MongoDB的角色作用（2）

    数据压力大到机器支撑不了的时候能否做到自动扩展? 在系统早期,数据量还小的时候不会引起太大的问题,但是随着数据量持续增多,后续迟早会出现一台机器硬件瓶颈问题的.而MongoDB主打的就是海量数据架构, ...

  9. js去除空格（trim方法）

    /** * 去空格 */ String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); ...

  10. TCP Flow Control and Data Transfer

    TCP Flow Control TCP Data Transfer Selective Repeat ARQ with Positive ACK Window slides a byte basis ...