/*在事件的内部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. 关于判断是安卓还是ios环境跳转下载页

    H5项目中判断是安卓还是iOS手机就跳转到不同的下载页,项目如下https://github.com/JserJser/dailyPush/tree/master/daily6/H5 这个项目里面我比 ...

  2. Redis多API开发

    目录 Redis API支持 redis-py安装方式 Python 连接redis 直接连接 使用连接池连接 Windows 连接redis数据库 一.下载Redis Desktop Manager ...

  3. typeof, offsetof, container_of宏

    container_of宏实现如下: #define container_of(ptr, type, member) ({ \ )->member ) *__mptr = (ptr); \ (t ...

  4. 利用TensorFlow识别手写的数字---基于两层卷积网络

    1 为什么使用卷积神经网络 Softmax回归是一个比较简单的模型,预测的准确率在91%左右,而使用卷积神经网络将预测的准确率提高到99%. 2 卷积网络的流程 3 代码展示 # -*- coding ...

  5. T2483 电梯（模拟题）

    https://www.luogu.org/problem/show?pid=T2483 题目背景 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道. ...

  6. input 输入框type='search'去掉×

    input输入时,为了让ios键盘的前进会变为搜索,设置input的type='search'但是安卓输入框后面会出现个小叉,实际不需要这个× 解决办法: input[type=search]::-w ...

  7. datetime模块常用函数

    import datetime import time # 当前时间戳 now = time.time() print(now) # 时间戳转换成时间元祖 now = time.localtime(n ...

  8. shell linux基本命令实例、笔记

    1. 在当前文件夹下.查找20分钟内,被訪问过的文件, 并将文件的详情显示出来: find ./ -name '*.log' -mmin -20 -exec ls -l {} \;   当然,须要指出 ...

  9. CPU 和内存 $ free -m$ uptime$ top$ htop

    注意以下问题: 还有空余的内存吗? 服务器是否正在内存和硬盘之间进行swap? 还有剩余的CPU吗? 服务器是几核的? 是否有某些CPU核负载过多了? 服务器最大的负载来自什么地方? 平均负载是多少?

  10. 洛谷P1003 [NOIP2011提高组Day1T1]铺地毯

    P1003 铺地毯 题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号 ...