/*在事件的内部console.dir(event)*/

         /**

          * 事件对象event

          *      clientX/clientY 获取鼠标基于浏览器窗口（可视区域的坐标位置）全兼容

          *

          *      pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容

          *      -- 兼容方案：clintY+页面滚动出去垂直距离

          * */

         /**

          * console.dir(element)

          * 元素element

          *      offsetLeft/offsetTop  获取基于offsetParent<--当前元素的定位父级元素>相对的坐标值

          *      offsetWidth/offsetHeight 获取元素的实体范围的宽高 content+padding+border

          *      scrollLeft/scrollTop  获取元素滚动出去的距离

          *      scrollWidth/scrollHeight 滚动框里面的盒子(滚动元素)大小    不常用

          *      clientHeight/clientWidth 获取盒子的宽高，不包含滚动条

          * */

JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别的更多相关文章

  1. 一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）

    偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...

  2. 通过一个实例理解 offsetLeft，offsetTop; offsetWidth , offsetHeight

    obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型 obj.offsetLeft 指 obj 相对于版面或由 offsetParen ...

  3. scrollTop clientTop offsetTop scrollHeight clientHeight clientWidth的差别及使用方法

    这几个属性做滚动时会经经常使用到.现总例如以下: 首先定义一个div.样式例如以下: <style> *{ margin:0px; padding:0px;} body{ margin:0 ...

  4. javascript 中 x offsetX clientX screenX pageX的区别

    在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli ...

  5. offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

    offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...

  6. 如何更好的理解（pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY，offsetLeft,style.left）

    1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X ...

  7. 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight

    一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...

  8. 元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

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

  9. pageX/pageY,screenX/screenY,clientX/clientY的差别

    pageX/pageY,screenX/screenY,clientX/clientY的差别 $(document).click(function(e){ //x方向无差别 //alert(e.pag ...

随机推荐

  1. github 访问加速

    http://nullpointer.pw/github%E4%BB%A3%E7%A0%81clone%E5%8A%A0%E9%80%9F.html hosts:https://raw.githubu ...

  2. Linux 内存缓存占用过大，Centos7设置定时清除buff/cache的脚本

    Linux系统buff/cache 中缓存数据占用内存过高,定时清理buff/cache ,释放系统内存 root权限创建脚本文件: touch cleanCache.sh && vi ...

  3. Python学习笔记之常用函数及说明

    Python学习笔记之常用函数及说明 俗话说"好记性不如烂笔头",老祖宗们几千年总结出来的东西还是有些道理的,所以,常用的东西也要记下来,不记不知道,一记吓一跳,乖乖,函数咋这么多 ...

  4. VS 快捷键和正则替换

    本文在VS2017中可用 1.注释 :Ctrl  K C 取消注释: Ctrl K U 2.整理代码格式: Ctrl K D 或者 Ctrl K F 3.快速切换不同的代码窗口  Ctrl+Tab 4 ...

  5. 关于Cocos2d-x多线程异步载入资源的问题

    我们通常使用CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("xxx.plist" ...

  6. 2019.10.25 csp-s模拟测试87 反思总结

    一次非常神奇的考试,考完试以后看着T2的0pts突然笑死我自己 太智障了这什么神奇的题意理解错误23333 T1一眼分类讨论,两眼二分,觉得分类讨论有点玄学但是出题人八成不会卡[何],然后本着对二分的 ...

  7. python-基础-面向对象2-异常-模块工厂模式

    1 工厂模式和单例模式 1简单工厂模式 1.1.使用函数实现 # 定义伊兰特车类 class YilanteCar(object): # 定义车的方法 def move(self): print(&q ...

  8. shell 第一篇

    1. 查看当前linux 支持的shell 类型 [root@nfs01 ~]# cat /etc/shells /bin/sh /bin/bash /sbin/nologin /bin/dash / ...

  9. 09安装运行redis-trib.rb所需的环境

    运行redis-trib.rb脚本配置Redis的cluster,需要安装ruby环境,这里采用源码安装: 1:下载源码包: https://cache.ruby-lang.org/pub/ruby/ ...

  10. JS为什么是单线程的？

    JavaScript语言最大的特点就是单线程.它是浏览器的脚本语言.在同一时间只能做一件事.用于操作DOM.如果JS是多线程的,当我在给一个DOM添加内容时,又删除了这个DOM,那么JS该怎么做. 关 ...