真心地我也是懵逼的

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. Windows系统搭建Mysql Cluster集群

    简单介绍一下MySQL集群涉及的三种节点:     管理节点(也可以称管理服务器)是整个集群环境的核心,类似于集群中起调度作用的枢纽,由它来负责管理其它节点(数据节点和SQL节点)的开启.关闭或重启某 ...

  2. CentOS 6.0 VNC远程桌面配置[转]

    原文出处: http://blog.haohtml.com/archives/12281 谢谢作者. 引言:必须明白:vncserver在调用的时候,会根据你的配置来启用server端的监听端口,端口 ...

  3. 《Cracking the Coding Interview》——第5章：位操作——题目3

    2014-03-19 05:57 题目:给定一个整数N,求出比N大,而且二进制表示中和N有相同个数的‘1’的最小的数,比如3是‘11’,接下来的5是‘101’,再接下来的6是‘110’. 解法:从低位 ...

  4. DOS程序员手册（十二）

    DOS可安全使用 610页 在DOS控制台I/O操作进行轮询循环时,有规律地调用中断,以便允许终止 并驻留(TSR)程序(如适用于DOS的实用程序PRINT.COM),知道它可安全 地使用文件操作和其 ...

  5. [Ceres]C++优化库

    官网教程: http://ceres-solver.org/nnls_tutorial.html 定义了一个最小二乘法求解器 自动求导的功能

  6. android瀑布流照片墙实现代码详解

    照片墙的实现,是需要往手机里面添加很多图片的,如果没有对资源进行合理的释放,程序很快就会出现OOM.所以需要用到LruCache算法来缓存图片. 1,首先是图片资源类,这个类中包含了很多图片链接. p ...

  7. Application_Start事件中用Timer做一个循环任务

    protected void Application_Start(object sender, EventArgs e) { System.Timers.Timer timer = new Syste ...

  8. 物联网第一次作业--我眼中的物联网——从认识RFID开始

    无线射频识别技术(Radio FrequencyIdentification,简称:RFID)是一种非接触式的自动识别技术,其基本原理是利用射频信号和空间耦合(电感或电磁耦合)或雷达反射的传输特性,实 ...

  9. 【BestCoder #48】

    与之前一样,秒刷A和B,然后就永远卡在了C B也因为少看一句话被Hunt掉了 说说C的做法吧(分块大法好 给定一个序列,每次询问区间l-r,求∑(ai^bi),其中bi是指ai在区间中的出现次数,ai ...

  10. 决策树与随机森林Adaboost算法

    一. 决策树 决策树(Decision Tree)及其变种是另一类将输入空间分成不同的区域,每个区域有独立参数的算法.决策树分类算法是一种基于实例的归纳学习方法,它能从给定的无序的训练样本中,提炼出树 ...