屏幕

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. iOS特殊界面旋屏设置的方法之一

    1.AppDelegate.h @property (assign, nonatomic) BOOL allowRotation; 2.AppDelegate.m #pragma mark - 自动旋 ...

  2. NSPredicate的使用,超级强大

    NSPredicate *ca = [NSPredicate predicateWithFormat:(NSString *), ...]; Format: (1)比较运算符>,<,==, ...

  3. 欧拉降幂公式 Super A^B mod C

    Description Given A,B,C, You should quickly calculate the result of A^B mod C. (1<=A,C<=100000 ...

  4. 磁盘,fdisk分区,MBR,dd命令

    光盘和磁盘.u盘.软盘.硬盘有什么区别 ①光盘: cdrom/dvdrom:光驱(光盘驱动器)    rom:只读    ram:可以擦写    cd:700M    dvd:4G ②软盘:flopp ...

  5. 全文索引：部分词能查到，部分词查不到的bug

    全文索引的概念:将存储在数据库中的整本书或整篇文章中的任意内容信息查找出来的技术.它可以根据需要获取全文中有关章,节,段,句,词等信息,也可以进行各种统计和分析. 原理是先定义一个词库,然后在文章中查 ...

  6. oracle删除数据文件

    在我们详细介绍之前,我们必须说清楚一点:Oracle不提供如删除表.视图一样删除数据文件的方法,数据文件是表空间的一部分,所以不能“移走”表空间. 一.使用offline数据文件的方法 非归档模式使用 ...

  7. Django【第18篇】：Django之缓存

    Django 之缓存 一.缓存 由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存 ...

  8. wepy-开发总结(功能点)

    开发小程序中,遇到的wepy的几点坑,记录一下; 更详细的项目总结记录请见我的个人博客:https://fanghongliang.github.io/ 1.定时器: 在页面中有需要用到倒计时或者其他 ...

  9. 过采样算法之SMOTE

    SMOTE(Synthetic Minority Oversampling Technique),合成少数类过采样技术．它是基于随机过采样算法的一种改进方案,由于随机过采样采取简单复制样本的策略来增加 ...

  10. tomcat的内存配置

    WEB站点在跑安全测试时,跑一会儿就连接不上,考虑是否是tomcat内存溢出问题. Linux环境,修改Tomcat的内存配置: 修改bin/catalina.sh文件,在cygwin=false前面 ...