/*在事件的内部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. new运算符与malloc函数（还需要修改）

    细说new与malloc的10点区别 C++ 自由存储区是否等价于堆? 浅谈new/delete和malloc/free的用法与区别 new和malloc都是在对上开辟内存,但尽量使用new. 使用m ...

  2. Ionic JPush极光推送二

    1.看图解决问题   2.解决出现统计代码提示问题 修改这个java 文件 导入命名空间 import cn.jpush.android.api.JPushInterface; 添加方法 @Overr ...

  3. 第二章 Odoo 12开发之开发环境准备

    在更深入了解 Odoo 开发之前,我们应配置好开发环境并学习相关的基础管理任务.本文中,我们将学习创建 Odoo 应用所需用到的工具和环境配置.这里采用 Ubuntu 系统来作为开发服务器实例的主机, ...

  4. BZOJ 2165: 大楼

    Time Limit: 40 Sec Memory Limit: 259 MB Submit: 957 Solved: 353 [Submit][Status][Discuss] Descriptio ...

  5. app-safeguard-record：record

    ylbtech-work-app-safeguard-record:record 1.返回顶部 1. 示数 示数一般是指机械.仪器.仪表.或者需要对数字进行公开的显示的对外数字的宣示.比如电度表(千瓦 ...

  6. Luogu P2864 [USACO06JAN]树林The Grove(bfs)

    P2864 [USACO06JAN]树林The Grove(bfs) 题面 题目描述 The pasture contains a small, contiguous grove of trees t ...

  7. Linux 定时任务执行 php artisan

    */ * * * * php /www/wwwroot/project/artisan command:exec postNews 5分钟执行一次

  8. CentOS 6.5安装libvirt启动不了libvirtd进程的错误

    今天安装kvm时遇到了一个libvirtd服务启动不了的问题,具体报错信息如下: 自己检查了一阵子,确定其他方面没有问题,在网上搜到了答案,在此整理下来: 再次启动服务,没有任何问题:

  9. 【转载】传统以太网和时间敏感网络TSN的区别

    转载连接:http://www.proav-china.com/News/16800.html ——Biamp亚太区高级工程师   Kane Zhang [专业视听网报道]:[摘要]AVB-Audio ...

  10. 其他pyton笔记

    #小部分老男孩pyton课程 #所有脚本第一句话都要写解释以下脚本是用什么解释器 #!/usr/bin/env python #语言设置为:简体中文 #_*_coding:utf-8_*_ ##### ...