1、clientX、clientY      光标位置——>距离当前body可视区域的x，y坐标

2、pageX、pageY    光标位置——> 对于整个页面来说，包括了被卷去的body部分的长度

3、screenX、screenY  光标位置——>点击位置距离当前电脑屏幕的x，y坐标

4、offsetX、offsetY   光标位置——> 相对于带有定位的父盒子的x，y坐标

5、x、y   光标位置——>点击位置距离当前电脑屏幕的x，y坐标

具体如图所示：

js 鼠标位置的更多相关文章

  1. js获取鼠标位置的各种方法

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

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

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

  3. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

  4. js如何获取鼠标位置

    获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...

  5. JS魔法堂：关于元素位置和鼠标位置的属性

    一.关于鼠标位置的属性   1. 触发鼠标事件的区域 盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件.   2. 鼠标事件对象Mous ...

  6. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. js鼠标及对象坐标控制属性详细解析

    对js鼠标及对象坐标控制属性进行了详细的分析介绍.  offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 ...

  8. JS鼠标滚动插件scrollpath使用介绍

    JS鼠标滚动插件scrollpath:在这个插件中首先要引人的JS是jQuery,因为后面的JS都是基于它的.再者需要引入的是jquery.scrollpath.js.scrollpath.css还有 ...

  9. 兼容IE FF 获取鼠标位置

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

随机推荐

  1. Python __call__详解

    可以调用的对象 关于 __call__ 方法,不得不先提到一个概念,就是可调用对象(callable),我们平时自定义的函数.内置函数和类都属于可调用对象,但凡是可以把一对括号()应用到某个对象身上都 ...

  2. linux预备知识

    我们正在接近去看一些实际的模块代码. 但是首先, 我们需要看一些需要出现在你的模块 源码文件中的东西. 内核是一个独特的环境, 它将它的要求强加于要和它接口的代码上. 大部分内核代码包含了许多数量的头 ...

  3. H3C配置Trunk端口

  4. H3C使用tracert命令--用户视图

    <H3C>tracert ?                                                                     -a       指明 ...

  5. Command failed: git -c core.longpaths=true config --get remote.origin.url

    「Unable to Connect to GitHub.com For Cloning」 Error: Command failed: git -c core.longpaths=true conf ...

  6. JMeter JMS测试计划

    在本节中,我们将学习如何编写一个简单的测试计划来测试Java Messaging Service(JMS). 出于测试目的,我们使用Apache ActiveMQ.有各种JMS服务器,如:glassf ...

  7. To learns

    1. avro https://www.jianshu.com/p/ecbb607809c4

  8. 循环语句作业与循环补充（continue与break）

    作业: 1.使用while循环输入1 2 3 4 5 6 8 9 10(没有7) n = 1 while n < 11: if n == 7: pass else: print(n) n = n ...

  9. pytorch代码调试工具

    https://github.com/zasdfgbnm/TorchSnooper pip install torchsnooper 在函数前加装饰器@torchsnooper.snoop()

  10. 配置一个yum私有仓库

    使用一台服务器配置私有仓库做yum源,本身使用file,客户端使用http连接 安装http服务: [root@ceph1 ~]# yum -y install httpd 修改配置文件 Docume ...