分清clientY pageY screenY layerY offsetY的区别

时间：2022-11-05 00:39:51

分清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. 高程（4）：执行环境、作用域、上下文执行过程、垃圾收集、try&period;&period;&period;catch&period;&period;&period;

    高程三 4.2.4.3 一.执行环境 1.全局执行环境是最外层的执行环境. 2.每个函数都有自己的执行环境,执行函数时,函数环境就会被推入一个当前环境栈中,执行完毕,栈将其环境弹出,把控制器返回给之前 ...

  2. 关于django访问默认后台admin的时候提示403错误，

    Forbidden (403) CSRF verification failed. Request aborted. You are seeing this message because this ...

  3. Android 启动模式及常用的Intent的Flag

    LaunchMode 在声明Activity的xml中指定 android:launchMode="xxx" standard 标准模式.这是系统默认的模式,每次启动Activit ...

  4. 每日一九度之 题目1023：EXCEL排序

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:18804 解决:4240 题目描述:     Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能.     对每个测试用例 ...

  5. MyBatis学习总结&lowbar;03&lowbar;优化MyBatis配置文件中的配置

    一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置信息写在了MyBatis的conf.xml文件中,如下: 1 <?xml version=&quot ...

  6. Flex强制类型转换错误

    1.错误描写叙述 TypeError: Error #1034: 强制转换类型失败:无法将 HoleDetailInnerClass0@c2cccf1 转换为 mx.controls.listClas ...

  7. java入门基础

    什么是java? java是一门编程语言  编程语言有很多种 你比如 C语言 等等 为什么学习java呢! 因为你要和计算机交互  当然了你用汉语跟她说她听不懂 所以你要学习编程语言 那么额咱们的ja ...

  8. JAVA实用案例之验证码开发

    验证码在很多地方都会遇到,实现的方法和形式也有很多,主要的目的就是为了安全,防止一些恶意的攻击等.说实话那么多年竟然没注意过这东西,原理很简单,贴出来给大家做个参考. 1.简单介绍 一般稍微有些经验的 ...

  9. 保存单文件为mhtml

    1.F6 ,在地址栏输入 输入:chrome://flags 然后ctrl+f: 输入:mhtml 启动,重启即可保存为单文件.

  10. JavaScript（六）

    定时器 定时器在javascript中的作用1.制作动画2.异步操作3.函数缓冲与节流 定时器类型及语法 /* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行 ...

相关文章