屏幕

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. JavaEE高级-JPA学习笔记

    *JPA概述 *JPA是什么? - Java Persistence API :用于对象持久化的API - Java EE 5.0平台标准的ORM规范,使得应用程序以统一的方式访问持久化层 - JPA ...

  2. ERROR: Unable to clean up existing run directory

    Project Navigator - Launching PlanAhead gives: ERROR: Unable to clean up existing run directory   De ...

  3. linux extglob模式 和rm反选，除了某个文件外的其他文件全部删除的命令

    1.extglob模式开启之后Shell可以另外识别出5个模式匹配操作符,能使文件匹配更加方便. 不然不识别 #开启命令: shopt -s extglob #关闭命令: shopt -u extgl ...

  4. Saving James Bond - Easy Version

    题目来源: 浙江大学在慕课网上开设的<数据结构>课,陈越老师.何钦铭老师主讲,课后作业的一道题. 题目描述: 题目思路: 这道题目本质上讲就是列出图的连通集,但是这个连通集的起点是有约束的 ...

  5. LockSupport详解

    concurrent包是基于AQS (AbstractQueuedSynchronizer)框架的,AQS框架借助于两个类: Unsafe(提供CAS操作) LockSupport(提供park/un ...

  6. 快速幂(Fast Pow)

    定义 快速求a^b%c的算法 原理 指数可以被二进制分解 那么a^b可以分解为a^2^k1*a^2^k2*…… 又显然a^2^(k+1)=a^(2^k*2)=(a^2^k)^2 所以可以将指数在二进制 ...

  7. [洛谷P1864] NOI2009 二叉查找树

    问题描述 已知一棵特殊的二叉查找树.根据定义,该二叉查找树中每个结点的数据值都比它左儿子结点的数据值大,而比它右儿子结点的数据值小. 另一方面,这棵查找树中每个结点都有一个权值,每个结点的权值都比它的 ...

  8. maven打包的时候you are running on a JRE rather than a JDK?

    解决方案.删除掉,然后重新添加. 然后remove掉 然后Add  Library

  9. php array_keys()函数 语法

    php array_keys()函数 语法 作用:返回包含数组中所有键名的一个新数组.直线电机选型 语法:array_keys(array,value,strict) 参数: 参数 描述 array ...

  10. luogu 3488 [POI2009]LYZ-Ice Skates 线段树 + 思维

    Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin), ...