屏幕

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. 轮播图--js课程

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

  2. java web请求过程

    小技巧: 1.浏览器缓存 Ctrl+F5组合键刷新页面,浏览器会直接向目标URL发送请求,而不会使用浏览器缓存,并会在HTTP请求header中增加下面的请求头来告诉服务器不使用服务器缓存 发现在re ...

  3. dd命令注意：dd:unrecognized operand 'if'

    如果是 idd if=boot.bin 在等号两边不要有空格

  4. uoj280 【UTR #2】题目难度提升 堆维护中位数+set

    题目传送门 http://uoj.ac/problem/280 题解 这道题很妙啊. 这种题目如果给予选手足够的时间,每一个选手应该都能做出来. 大概就是核心思路看上去很简单,但是想要推出来并不简单. ...

  5. 第一次接触oracle

    登录 SQLPLUS cmd sqlplus [用户名]/[密码][@数据库] [参数] sqlplus sys/orcl as sysdba -- 登录 sys 用户,必须指定 sysdba 或 s ...

  6. sql中的group_concat用法

    group_concat(),手册上说明:该函数返回带有来自一个组的连接的非NULL值的字符串结果.比较抽象,难以理解. 通俗点理解,其实是这样的:group_concat()会计算哪些行属于同一组, ...

  7. ES6 Module（模块）

    1.export命令 一个模块就是一个独立的文件. 该文件内部的所有变量,外部无法获取. 如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量. 下面是一个 JS 文件,里 ...

  8. 虚拟机安装Windows系统，再安装orcale

    本文出自:http://www.cnblogs.com/2186009311CFF/p/8724441.html 1.创建新虚拟机 2.选择自定义 3.选择workstation 5.x(据安装的系统 ...

  9. ExtJS用Grid显示数据后如何自动选取第一条记录

    用Grid显示数据后,如何让系统自动选取第一条记录呢?在显示Grid时由于其Store正在loading,没法在Grid选取第一条记录,因为还没有记录,所以应在其Store进行操作. 查看Ext.da ...

  10. HDU - 5306 Gorgeous Sequence 线段树 + 均摊分析

    Code: #include<algorithm> #include<cstdio> #include<cstring> #define ll long long ...