真心地我也是懵逼的

clientX,clientY：针对屏幕有效区域,不包括滚动部分，坐标（0,0）一直在有效区域的左上角

X,Y：            针对屏幕有效区域,不包括滚动部分，坐标（0,0）一直在有效区域的左上角

offsetX,offsetY：针对屏幕有效区域，及包含滚动条部分（相对于当前元素（块或行内块））；当在有效区域内时，不包括滚动条部分

pageX,pageY:：   针对屏幕有效区域，及包含滚动条部分

layerX，layerY： 针对屏幕有效区域，及包含滚动条部分

screenX,screenY：可返回事件发生时鼠标指针相对于屏幕的水平坐标，不包括滚动条部分

效果图1：默认初始

效果图2：在黑色边框div区域内鼠标乱移动时，并且页面滚动条在最顶部未向下滑动时

效果图3：在黑色边框div外面鼠标乱移动时，并且页面滚动条在顶部没有向下滑动时

效果图4：在黑色边框div区域内鼠标乱移动时，并且，页面向下滑动，滚动条下移

效果图5：在黑色边框div外面鼠标乱移，页面下滑，滚动条下滑

js-offsetX、pageX、clientX、layerX、screenX的更多相关文章

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

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

  2. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...

  3. pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX-- ...

  4. 【转】pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...

  5. [转]pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...

  6. offsetX、clientX、screenX、pageX、layerX

    pageX/Y 原点相对于文档窗口左上角. offsetX/Y 原点相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值. (黑色为鼠标点击点 ...

  7. 通过了解JS的clientX、pageX、screenX等方法来获取鼠标位置相对屏幕，相对浏览器窗口，相对文档的坐标详解

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的浏览器下会有不同的结果甚至是有的浏览器下没结果,这篇文章就上鼠标点击位置坐标获取做一些简单的总结,没特殊 ...

  8. 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 ...

  9. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  10. JS中的事件、事件冒泡和事件捕获、事件委托

    https://www.cnblogs.com/diver-blogs/p/5649270.html https://www.cnblogs.com/Chen-XiaoJun/p/6210987.ht ...

随机推荐

  1. Android学习笔记（一）之仿正点闹钟时间齿轮滑动的效果

    看到正点闹钟上的设置时间的滑动效果非常好看,自己就想做一个那样的,在网上就开始搜资料了,看到网上有的齿轮效果的代码非常多,也非常难懂,我就决定自己研究一下,现在我就把我的研究成果分享给大家.我研究的这 ...

  2. 《Cracking the Coding Interview》——第13章：C和C++——题目2

    2014-04-25 19:29 题目:对比一下哈希表和STL中的map的区别,哈希表如何实现?如果数据规模比较小,可以用什么来代替哈希表? 解法:哈希表可以理解为一堆桶,每个桶都有唯一的id,桶里可 ...

  3. 转载——一步步学习js

    一步步学习javascript基础篇(0):开篇索引 阅读目录 索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习j ...

  4. ironic baremetal rescue process

    1.用户调用Nova的rescue函数 nova/virt/ironic/driver.py class IronicDriver(virt_driver.ComputeDriver): ...... ...

  5. Nginx和Squid配合搭建的Web服务器前端系统

    这个架构是目前我个人觉得比较稳妥并且最方便的架构,易于多数人接受: 前端的lvs和squid,按照安装方法,把epoll打开,配置文件照搬,基本上问题不多. 这个架构和app_squid架构的区别,也 ...

  6. THUWC2018 题解

    2018清华冬令营 又一次由于接连而至的玄学现象跪惨,错失良机,就不再公开提我这次惨痛的经历了,写点干货-- day1 A 零食 (1s, 1G) 试题简述 \(n\) 种物品1,\(m\) 种物品2 ...

  7. [Atcoder Grand Contest 006 F][AGC006F] Blackout [染色]

    题面 传送门 思路 首先,这个涂黑的方法我们来优化一下模型(毕竟当前这个放到矩形里面,你并看不出来什么规律qwq) 我们令每个行/列编号为一个点,令边(x,y)表示一条从x到y的有向边 那么显然只要有 ...

  8. [bzoj] 1085 骑士精神 || ID-DFS

    原题 找到最少的步数成为目标状态. IDDFS(限制层数的dfs)即可 #include<cstdio> #include<algorithm> using namespace ...

  9. UVALive4374 Drive through MegaCity

    题目戳这里. 首先我们对坐标进行离散化,有用的点就变成了\(O(N)\)个.我们假设\(A\)点\(B\)的右边(从\(A\)往\(B\)跑和从\(B\)往\(A\)跑等价),然后我们很容易发现不会往 ...

  10. 强军如歌（strong）

    强军如歌(strong) 题目描述 给定一个NN个数的序列AA,如果序列AA不是非降序的,你需要在其中选择一个数删掉,不断重复这个操作直到序列AA非降.求有多少种不同的删数方案.注意:删掉的数的集合相 ...