/*在事件的内部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. #pragma omp parallel for

    #pragma omp parallel for是OpenMP中的一个指令,表示接下来的for循环将被多线程执行,另外每次循环之间不能有关系.示例如下: int main(int argc, char ...

  2. light oj 1057 状压dp TSP

    #include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...

  3. PAT甲级——A1035 Password

    To prepare for PAT, the judge sometimes has to generate random passwords for the users. The problem ...

  4. 左神算法书籍《程序员代码面试指南》——1_10最大值减去最小值小于或等于num的子数组数量

    [题目]给定数组arr和整数num,共返回有多少个子数组满足如下情况:max(arr[i.j]) - min(arr[i.j]) <= num max(arfi.j])表示子数组ar[ij]中的 ...

  5. valueStack(值栈)

    值栈 值栈(ValueStack)就是 OGNL 表达式存取数据的地方.在一个值栈中,封装了一次请求所需要的所有数据. 在使用 Struts2 的项目中,Struts2 会为每个请求创建一个新的值栈, ...

  6. 给docker里的php安装gd扩展

    docker官方镜像为安装php扩展封装了函数,为开发者提供了很大的便利,以下以Dockerfile的形式演示安装gd扩展的方法,安装gd扩展需要安装几个依赖包,安装依赖包使用系统命令,安装命令根据基 ...

  7. js 获取复选框 和 并改变状态

    function checkAll() { var checkbox = document.getElementById('vegeids');// var boxes = document.getE ...

  8. Hadoop 伪分布式安装配置

  9. Odoo 在 Ubuntu 环境下性能调优

    一.首先我们要分析影响odoo 服务器 性能的因素 CPU 目前大部分CPU在同一时间只能运行一个线程,超线程的处理器可以在同一时间处理多个线程,因此可以利用超线程特性提高系统性能. 在linux系统 ...

  10. H5C3--仿京东首页（包含轮播图，倒计时）

    !!!很抱歉,之前的域名已经过期了,已经被别人购买了拿去做菠菜了,现在的话,京东页面我重新发布一下代码 #请看注意事项,因为有模拟请求,请在本地服务器或者IDEA类编译器打开(2019年10月10日0 ...