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. LuaForWindows_v5.1.4-45和lua-5.1.4.tar.gz

    Lua学习笔记(一) 安装调试环境 Lua学习笔记(一) 安装调试环境     觉得自己是该掌握一门脚本语言的时候了,虽然曾经用过C# 和JavaScript 写过Unity3D的脚本.但是,总觉得那 ...

  2. Python图表绘制Matplotlib

    引入 import numpy as npimport pandas as pdimport matplotlib.pyplot as plt# 导入相关模块 使用 # 图表窗口1 → plt.sho ...

  3. [转]MySQL常用查询

    单表查询 ①查询所有     * mysql> select * from student; ②查询选中字段记录 mysql> select s_name from student; ③条 ...

  4. 解决从旧格式的 csproj 迁移到新格式的 csproj 格式 AssemblyInfo 文件值重复问题

    现在很多小伙伴开始使用了 dotnet core 项目,但是如果是从以前的 dotnet framework 的项目修改为 dotnet core 项目格式,会发现编译的时候出现了 AssemblyI ...

  5. PHP判断类型

    is_bool();//判断是否为布尔型   is_float(); //判断是否为浮点型   is_int(); //判断是否为整型   is_numeric(); //判断是否为数值型   is_ ...

  6. 闲来无事写一个jquery计算器，没有进行封装......

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. C# 通过编程的方法在桌面创建回收站快捷方式

    基本所有的桌面都会存在回收站快捷方式,如果想要多创建几个快捷方式,点开就是回收站,请看本文的方法 在引用 Windows Script Host Object Model 这个 COM 方法之后可以使 ...

  8. TextInputLayout低版本bug ：“android.view.InflateException: Binary XML file line #6 : Error inflating class Textview”

    开发中用到TextInputLayout配合TextInputEdittext做输入框,在android7.0 android8.0手机上运行正常,在异步android5.0.2的手机上,点击输入框就 ...

  9. To learns

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

  10. HBase 原理

    遗留问题: 数据在更新时首先写入Log(WAL log)和内存(MemStore)中,MemStore中的数据是排序的,当MemStore累计到一定阈值时,就会创建一个新的MemStore,并且将老的 ...