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 type hints 之 Optional，Union

    1,前言 type hint 在pep484加入,我个人觉得这种类似于类型约束的(机制)有点违背了python简单.简洁的初衷,在慢慢向c# java 这种强类型语言看齐的节奏. 不过好在不强制使用, ...

  2. 2018-6-11-WPF-Frame-的-DataContext-不能被-Page-继承

    title author date CreateTime categories WPF Frame 的 DataContext 不能被 Page 继承 lindexi 2018-06-11 10:48 ...

  3. ArrayList中remove方法和set(null)的区别

    在分析源码ArrayList.remove()时,偶然发现了一个疑惑的点,就是:源码也是将最后一个对象的引用指向null(源码:elementData[--size] = null; // clear ...

  4. 【codeforces 766D】Mahmoud and a Dictionary

    time limit per test4 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  5. H5 数据存储localStorage

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. MySQL排序问题

    直接上SQL语句: SELECT * FROM user_test ORDER BY user_name ,user_money DESC; #user_name中如果是数字会先排在前面,然后在按字母 ...

  7. Python的优缺点、以及解释器种类

    优点 Python起始定位“优雅”.“明确”.“简洁”,工具型语言,上手快,实用性强. 开发效率高,支持库强大,很多功能都有与之对应的最优模块支持. 高级语言,编程时无需考虑内存等底层具体实现. 可移 ...

  8. 【37.48%】【hdu 2587】How far away ？(3篇文章,3种做法,LCA之Tarjan算法)

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...

  9. 【Kubernetes】容器集群管理常用命令笔记

    一.集群部署-查询集群状态 ①查询k8s master各组件健康状态: kubectl get componentstatus ②查询k8s node健康状态: kubectl get node 二. ...

  10. AS优化

    第一步:打开AS安装所在的位置,用记事本打开“红色框”选中的文件. 如图: 第二步:打开“studio64.exe.vmoptions”文件后修改里面的值,修改后如下: 1 2 3 4 5 6 7 8 ...