屏幕

screenX和screenY属性表示鼠标在整个显示屏的位置，从屏幕（而不是浏览器）的左上角开始计算的。

页面

pageX和pageY属性表示鼠标指针在这个页面的位置。页面的顶部可能在可见区域之外，所以即使鼠标指针位于同一位置，页面和客户端的坐标也可能不同。

客户端

clientX和clientY属性表示鼠标指针在浏览器可视区域中的位置。即使用户将页面向下滚动，使得页面顶部超出了可视区域，也不会影响客户端坐标。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <div id='body' style="width: 500px;height: 1500px;border: 1px solid red;padding: 0;margin: 0;"></div>

        <p id='sx'></p>

        <p id='sy'></p>

        <p id='px'></p>

        <p id='py'></p>

        <p id='cx'></p>

        <p id='cy'></p>

    </head>

    <body>

        <script type="text/javascript">

            var sx = document.getElementById('sx');

            var sy = document.getElementById('sy');

            var px = document.getElementById('px');

            var py = document.getElementById('py');

            var cx = document.getElementById('cx');

            var cy = document.getElementById('cy');

            function showPosition(e){

                sx.textContent =  e.screenX;

                sy.textContent =  e.screenY;

                px.textContent =  e.pageX;

                py.textContent =  e.pageY;

                cx.textContent =  e.clientX;

                cy.textContent =  e.clientY;

            }

            document.getElementById('body').addEventListener('mousemove',showPosition,false);

        </script>

    </body>

</html>

jt获取鼠标指针的位置的更多相关文章

  1. js 获取页面高度和宽度(兼容 ie firefox chrome),获取鼠标点击位置

    <script> //得到页面高度 var yScroll = (document.documentElement.scrollHeight >document.documentEl ...

  2. [WPF]获取鼠标指针下的元素

    原文:[WPF]获取鼠标指针下的元素   [WPF]获取鼠标指针下的元素 周银辉 以前写过一些GetElementUnderMouse之类的函数,要用到坐标换算而显得有些麻烦(特别是当元素有XXXTr ...

  3. js获取鼠标当前的位置

    有时候,我们需要得到窗口拖动或者鼠标移动的距离,此时可以通过计算鼠标前后在页面中的位置来得到想要的结果,下面介绍几个事件属性: 1.客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的.这个位 ...

  4. C# winform 获取鼠标点击位置

    说明:该篇随笔的代码内容并非出自本人,是在其他网站搜寻的,出处已经不记得了,本次随笔只为记录,目的帮助自己,帮助他人. 实现的原理也不做多的赘述,直接上代码. 第一个类是需要用到的Windows AP ...

  5. 通过 Windows API 获取鼠标位置等状态信息

    #include <graphics.h> #include <stdio.h> void main() { initgraph(, ); // 初始化绘图窗口 HWND hw ...

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

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

  7. C#-WinForm-如何获取文本框（TextBox）中鼠标，光标位置

    文本框(TextBox)中的鼠标位置和光标位置是两个不同的概念,鼠标位置是要点击鼠标后(NouseDown)获取到,而光标位置却是实时就要获取到,也就是用户输入一个字符(KeyUp),这个位置就要改变 ...

  8. JavaScript获取鼠标位置的三种方法

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

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

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

随机推荐

  1. Python 进程之间共享数据(全局变量)

    进程之间共享数据(数值型): import multiprocessing def func(num): num.value=10.78 #子进程改变数值的值,主进程跟着改变 if __name__= ...

  2. CSS完整

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  3. make_smbcodepage - 为Samba创建代码页文件

    总览 make_smbcodepage c|d 代码页 输入文件 输出文件 描述 这个工具是是Samba组件的一部分. 针对Samba 2.2的国际化功能,使用make_smbcodepage可以编译 ...

  4. 07java进阶——集合框架（set）

    1.list接口中常用的特有方法 package cn.jxufe.java.chapter7; import java.util.ArrayList; import java.util.List; ...

  5. 牛客练习赛14 A n的约数 （数论）

    链接:https://ac.nowcoder.com/acm/contest/82/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288 ...

  6. shell安装mysql，连接数据库，创建数据库

    https://blog.csdn.net/yhflyl/article/details/83061126 https://blog.csdn.net/wyl9527/article/details/ ...

  7. centos 安装samba

    1 安装 yum install samba samba-client samba-common -y 2 配置 vim /etc/samba/smb.conf 在最下面增加 [wolbo] path ...

  8. Centos7.5 mysql5.7.26二进制安装方式

    1    yum安装所需相关依赖包. yum -y install gcc-c++ yum -y install zlib zlib-devel pcre pcre-devel yum -y inst ...

  9. day1 instance,round,divmod,imput, 字符串

      >>> a = '123' >>> isinstance(a, str) True >>> b = 1 >>> type(b ...

  10. nginx限制文件访问速率

    需求: 一个文件下载功能需要限制文件同时访问的并发数和当个连接的访问速率: 配置: 在http context内增加: limit_conn_zone $binary_remote_addr zone ...