获取鼠标坐标值的总结为了避免混淆知识点

通过《javaScript高级程序设计》查到这些

event.clientX event.clientY event.pageX event.pageY event.screenX event.screenY

document.documentElement.scrollLeft || document.body.sctollLeft document.documentElement.scrollTop || document.body.scrollTop

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>mousePosition</title>

</head>

<body style="height:1000px;padding-top:400px;">

<h1>html鼠标位置有：客户区（视口）坐标位置，html页面坐标位置，屏幕坐标位置</h1>

<h3>鼠标相对于客户区的位置：<span id="client"></span>　所有的浏览器都支持这两个属性的哦！<h3>

<h3>鼠标相对于document的位置：<span id="page"></span>　IE8以前的浏览器不支持这两个属性！<h3>

<h3>鼠标相对于屏幕的位置：<span id="screen"></span>　所有的浏览器都支持这两个属性的哦！<h3>

<P>!!!document.body （混杂模式）或 document.documentElement （标准模式）</p>

<script type="text/javascript">

    var oClient = document.getElementById('client');

    var oPage = document.getElementById('page');

    var oScreen = document.getElementById('screen');

    document.onmousemove = function(){

        oClient.innerHTML = 'clientX='+getPointerPostion().clientX+';clientY='+getPointerPostion().clientY;

        oPage.innerHTML = 'pageX='+getPointerPostion().pageX+';pageY='+getPointerPostion().pageY;

        oScreen.innerHTML = 'screenX='+getPointerPostion().screenX+';screenY='+getPointerPostion().screenY;

    }

    function getElementObject(event){

        return event || window.event;

    }

    function getPointerPostion(e){

        e = e || getElementObject(e);

        var clientX = e.clientX;

        var clientY = e.clientY;

        var pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));

        var pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

        var screenX = e.screenX;

        var screenY = e.screenY;

        return {

            'clientX':clientX,

            'clientY':clientY,

            'pageX':pageX,

            'pageY':pageY,

            'screenX':screenX,

            'screenY':screenY

        };

    }

</script>

</body>

<html>

javaScript中获取鼠标位置的理解的更多相关文章

  1. javascript:与获取鼠标位置有关的属性

    javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了 ...

  2. WPF中获取鼠标相对于屏幕的位置

    原文:WPF中获取鼠标相对于屏幕的位置 WPF中获取鼠标相对于屏幕的位置                                   周银辉WPF编程时,我们经常使用Mouse.GetPosi ...

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

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

  4. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. C++获取鼠标位置及全局检测鼠标行为

    1.获取鼠标位置(在屏幕的位置)  CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...

  6. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  7. [cb]SceneView 获取鼠标位置

    扩展需求 在Scene视图中获取鼠标的位置 Demo 在Scene视图中,当鼠标点击时实例化一个Cube 重点部分 实现代码 using UnityEngine; using UnityEditor; ...

  8. js如何获取鼠标位置

    获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...

  9. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

随机推荐

  1. nginx 配置以及常用命令

    windows下安装以及配置nginx http://jingyan.baidu.com/article/f3e34a12a9c1c3f5eb6535d4.html 1)下载地址: http://ng ...

  2. PHP正则表达式屏蔽电话号码中间段

    要屏蔽电话号码中间段,首先要知道电话号码的正则表达式. 先来看看PHP匹配电话号码的正则表达式. 匹配固定电话的正则表达式为: /(0[0-9]{2,3}[\-]?[2-9][0-9]{6,7}[\- ...

  3. php 字符编码转换函数 iconv mb_convert_encoding比较

    在使用PHP处理字符串时,我们经常会碰到字符编码转换的问题,你碰到过iconv转换失败吗? 发现问题时,网上搜了搜,才发现iconv原来有bug ,碰到一些生僻字就会无法转换,当然了配置第二个参数时, ...

  4. 【Python】python 多线程两种实现方式

    目前python 提供了几种多线程实现方式 thread,threading,multithreading ,其中thread模块比较底层,而threading模块是对thread做了一些包装,可以更 ...

  5. 为什么ELF文件的加载地址是0x8048000

    在一个进程的虚拟地址空间中,ELF文件是从0x8048000这个地址开始加载的,为什么会是这个地址? 回答:用命令ld --verbose可以看到0x08048000,ld的默认脚本用这个地址作为EL ...

  6. 安装notepad++之后怎样在鼠标右键上加上Edit with notepad++

    在鼠标右键上加入使用notepad++编辑 我们在安装完notepad++文本编辑器之后,在一个文本文件上右键有时候并没有出现"使用notepad++编辑的选项",我们可以通过简单 ...

  7. cf C. Prime Number

    http://codeforces.com/contest/359/problem/C 先求出分子的公因子,然后根据分子上会除以公因子会长生1,然后记录1的个数就可以. #include <cs ...

  8. 原型模式 - OK

    原型模式(Prototype),用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 简单说来原型模式就是从一个对象再创建另外一个可定制的对象,而且不需知道任何创建的细节. 原型模式UML ...

  9. WCF服务实现客户端Cookie共享，表单验证的解决方案

    基于前几篇的文章,如果理解了通道 拦截器  服务转发的概念,相信你肯定也能理解咋的玩了. 说白了就是创建客户端的拦截器: 实现接口:IClientMessageInspector. 里面的方法就是客户 ...

  10. 计算机语言学习导论[C/C++]

    作者:@幻の上帝 1 前置条件语文其实挺重要,这个没问题,但容易被忽视.当然,如果不是经常要折腾文档,要求不高:但起码要能说清楚话.数学重要,主要是广度,作为快速学习相关领域知识的基础.深度上面可深可 ...