真心地我也是懵逼的

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. VSX-4 VSXTra

    要介绍VSXTra项目不是一个简单的事情. 而且要在上面进行扩展,删减就更不容易. 源码分析的资料几乎没有,可怜的几个示例项目,相较而言,英文已经不是阻碍我前进的步伐了. 本篇只是简单的分析,对于已经 ...

  2. “管中窥豹”，MyCAT的基因缺陷

    提起MyCAT,我的脑海里,总是浮现出这样一首偈.弘忍觉得自己老了,需要找一个接班人,于是,弘忍要求弟子们每人写一个偈子,根据偈子观察各位弟子的开悟程度,从而传授正宗禅宗的衣钵.弟子们心里其实都很明白 ...

  3. Mac 小技巧

    本文的大部分技巧来自于池建强老师的<MacTalk.人生元编程>,感谢他的辛苦付出,本文多系整理而已. 终端输入说英语 说英语时我们当然希望有标准发音.在Mac中不需要字典,直接在终端里输 ...

  4. Pascal小游戏 贪吃蛇

    一段未完成的Pascal贪吃蛇 说这段代码未完成其实是没有源代码格式化,FP中一行最多只有255字符宽. uses crt; const screenwidth=50; screenheight=24 ...

  5. 【Hazard of Overfitting】林轩田机器学习基石

    首先明确了什么是Overfitting 随后,用开车的例子给出了Overfitting的出现原因 出现原因有三个: (1)dvc太高,模型过于复杂(开车开太快) (2)data中噪声太大(路面太颠簸) ...

  6. ironic-conductor与ipa交互clean部分代码分析

    clean的动作会在provide和delete阶段才会触发 从代码分析: 对节点执行的node provide/deleted/clean会先发送到ironicclient ironicclient ...

  7. 1064 Complete Binary Search Tree （30 分）（二叉查找树）

    中序遍历建树 #include<bits/stdc++.h> using namespace std; ; int s[N]; int n; int tree[N]; int cnt; v ...

  8. 【转】在Unity中读写文件数据：LitJSON快速教程

    作者:王选易,出处:http://www.cnblogs.com/neverdie/ 欢迎转载,也请保留这段声明.如果你喜欢这篇文章,请点[推荐].谢谢! 介绍 JSON是一个简单的,但功能强大的序列 ...

  9. 【转】Unity3D 关于贝赛尔曲线,平滑曲线,平滑路径,动态曲线

    http://tieba.baidu.com/p/2460036481 很多时候我们需要的并不是直线和折线,而是平滑的曲线,比如寻路系统,某些物体的曲线运动,都需要平滑曲线来保证效果,今天试了一下,通 ...

  10. 关于tap设备

    $QEMU_PATH \ -nographic \ -drive file=./rootfs.ext4,format=raw \ -net nic,vlan=0 -net tap,vlan=0,ifn ...