/*在事件的内部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. Spring AOP(三)--XML方式实现

    本文介绍通过XML方式实现Spring AOP,在上一篇中已经介绍了通过注解+java配置的方式,这篇文章主要是看XML中怎么配置,直接上代码了: 一.创建一个连接点 1⃣️定义接口 注意⚠️:可以定 ...

  2. DLL编程总结

    进行DLL的编程主要涉及到两个方面的问题,一个是要保证DLL中要导出的函数名不被编译器不可控地更改(在C++中由于重载机制的存在,会造成程序被编译时函数名被改变),其实就是要保证DLL导出的函数名与使 ...

  3. [Day3] Nginx配置Https

    一. 网络安全之Http与Https Http协议是互联网行业中设计的最好架构之一.20多年间,应用Http协议传输数据的软件越来越多,企图从http协议传输中非法获取.篡改用户重要数据的非法行为也越 ...

  4. RandomRowFilter（3）

    比较容易理解 用来随机抽取 RandomRowFilter:从名字上就可以看出其大概的用法,本过滤器的作用就是按照一定的几率(<=0会过滤掉所有的行,>=1会包含所有的行)来返回随机的结果 ...

  5. java内部类和静态内部类

    看代码理解内部类,局部内部类和静态内部类 内部类代码: public class InnerTest { private static String name; private int age; pu ...

  6. css背景图自适应

    在开发时,修改了d2admin的登录页面.使用了背景图片,但是ui给的图过于大(可能是我电脑屏幕小哈)无法完整的显示到页面上,所以修改了代码,可以完整显示背景图. 代码如下:background: u ...

  7. JS和vue中日期格式的转换

    1.获取当前时间: var now=new Date(); //Tue Oct 17 2017 18:08:40 GMT+0800 (中国标准时间) 获取当前时间的日期 new Date().getD ...

  8. linux bash算术运算

    +, -, *(乘), /(除), **(乘方), %(取模) let var=算术运算符表达式 var=$[算术运算符表达式] var=$((算术运算符表达式)) var=$(expr $ARG1 ...

  9. C# EventWaitHandle用法

    waithander就是用来阻塞当前线程的,然后通过set()方法放开 namespace waithandler { class Program { //static EventWaitHandle ...

  10. 用navicat把MYSQL一张表的数据批追加到另外一张表

    1. 表结构完全一样 insert into 表1 select * from 表22. 表结构不一样(这种情况下得指定列名) insert into 表1 (列名1,列名2,列名3) select ...