真心地我也是懵逼的

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. Python语法之com[1][:-7]

    strCom = com[0] + ": " + com[1][:-7] 如上应该是一个字符串合成,最后的[1][:-7],我理解是去除com[1]的最后7个字符. 比如com[0 ...

  2. 内存压缩PK页面交换 解决内存问题谁更在行

    一台服务器能够支持的虚拟机数量通常取决于物理硬件所能够提供的可用计算资源.大多数资源, 比如处理器周期.存储I/O和网络带宽等,都能够相对简单地进行共享.这种做法的原理在于负载并不总是处于忙碌状态,因 ...

  3. Github上最受关注的前端大牛 快来膜拜把！

    Github上最受关注的前端大牛 快来膜拜吧! 来源:csdn 发布时间:2014-08-06 阅读次数:4058 14   本文列出了Github上最受关注的10位前端大牛.看看他们负责的项目和提交 ...

  4. java 解析/读取 种子/bt/torrent 内容

    碰到不会的技术问题,我还是先度娘.能中文看懂,为什么非要看英文呢. java 解析/读取 种子/bt/torrent  内容,这个度娘给的满意答案并不是很多.GG之后的搜索结果出现了stackover ...

  5. 关于 Google Chrome “Your connection is not private” 问题的处理

    今天下午访问google网站的时候,突然不能访问了,提示“Your connection is not private”(你的连接不是私密连接):查看XX-NET的设置,显示“请检查浏览器代理设置”. ...

  6. javascript 数组的常用方法总结

    前言 主要讨论一下数组的方法,     1.splice和slice的区别     2.pop和push     3.shift和unshift     4.join     5.forEach(es ...

  7. ADB命令总结（1）

    今日继续学习ADB,使用真机来操作,因此把所用到的命令总结如下: 一,模拟按HOME键 adb shell input keyevent KEYCODE_HOME 二,滑动手机屏幕 从(x1,y1)滑 ...

  8. 算法のLowLow三人行

    点击

  9. Leetcode 662.二叉树最大宽度

    二叉树最大宽度 给定一个二叉树,编写一个函数来获取这个树的最大宽度.树的宽度是所有层中的最大宽度.这个二叉树与满二叉树(full binary tree)结构相同,但一些节点为空. 每一层的宽度被定义 ...

  10. HDU 4747 Mex ( 线段树好题 + 思路 )

    参考:http://www.cnblogs.com/oyking/p/3323306.html 相当不错的思路,膜拜之~ 个人理解改日补充. #include <cstdio> #incl ...