<body>

<script>

    function mouseMove(ev)

    {

        ev = ev || window.event;

        var mousePos = mouseCoords(ev);

        //alert(ev.pageX);

        document.getElementById("xxx").value = mousePos.x;

        document.getElementById("yyy").value = mousePos.y;

    }

    function mouseCoords(ev)

    {

        if(ev.pageX || ev.pageY){

            return {x:ev.pageX, y:ev.pageY};

        }

        return {

            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

            y:ev.clientY + document.body.scrollTop - document.body.clientTop

        };

    }

    document.onmousemove = mouseMove;

    $(document).mousemove(function(e){

        $('.h1').text(e.pageX + ", " + e.pageY);

    });

    alert(document.getElementsByTagName("div").screenX);

</script>

    鼠标 X 轴:<input id = xxx type = text>

    鼠标 Y 轴:<input id = yyy type = text>

    <h1 class="h1"></h1>

    <h1 class="h2"></h1>

</body>

一.PageX和clientX

PageX和clientX ,这个两个比较容易搞混,
PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化
clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法
PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)
页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度

二.screenX

screenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个没有任何争议,不讨论 ^_^

三.offsetX和layerX

接下来是offsetX和layerX
offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

layerX:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点
也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点

JS获得鼠标位置的更多相关文章

  1. JS获取鼠标位置，兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取.网上说的一般都是触发mousemove事件才行.我这里有两段代码,思路都一 ...

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

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

  3. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

  4. js获取鼠标位置

    1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...

  5. js 获取 鼠标位置 和获取元素位置

    ]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...

  6. js获得鼠标的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js如何获取鼠标位置

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

  8. JS魔法堂：关于元素位置和鼠标位置的属性

    一.关于鼠标位置的属性   1. 触发鼠标事件的区域 盒子模型中的border,padding,content区域会触发鼠标事件,点击margin区域将不触发鼠标事件.   2. 鼠标事件对象Mous ...

  9. jq获取鼠标位置

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

随机推荐

  1. code vs1706 求合数和(数论 素数的判定)

    1706 求合数和  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver 题解  查看运行结果     题目描述 Description 用户输入一个数,然后输出 ...

  2. ORACLE 远程导入导出数据库

      Oracle数据导入导出imp/exp就相当于oracle数据还原与备份.exp命令可以把数据从远程数据库服务器导出到本地的dmp文件,imp命令可以把dmp文件从本地导入到远处的数据库服务器中. ...

  3. objective-c字符串笔记

    字符串 //        字符串  分可变字符串和不可变字符串 //        不可变字符串的初始化方式 //        NSString *string = [[NSString allo ...

  4. 打开Genesis设置单位为mm

    打开Genesis界面: 点击Configuration: 可看到只要设置get_def_units的值即可: 打开C:\genesis\sys\config配置文件,在最后一行加入:get_def_ ...

  5. 关于安装Ubuntu后触摸板无法使用的解决方案

    安装了Ubuntu后发现触摸板无法使用,以为是修改了安装文件导致(之前拿安装源文件做了小实验),于是重装,之后触摸板仍无法使用,在一个长满小广告的页面上找到了解决方案. 以下是原文章内容: 最近突然发 ...

  6. Tomcat在Linux上的安装与配置

    以下使用的Linux版本为: Redhat Enterprise Linux 6.5 x86_64,Tomcat版本为tomcat-7.0.54. 1.下载JDK与Tomcat.    jdk下载地址 ...

  7. python中读取\写入CSV中数据的方法

  8. 网络中文乱码问题 utf-8

    // 网络中文乱码问题 utf-8 [string stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

  9. 设置tomcat内存设定

    Linux: 在/usr/local/apache-tomcat-/bin 目录下的catalina.sh添加: JAVA_OPTS='-Xms512m -Xmx1024m'要加"m&quo ...

  10. C#学习笔记---协变和逆变

    http://www.cnblogs.com/alphafly/p/4048608.html 协变是指方法能从委托的返回类型派生的一个类型. 逆变之方法获取的参数可以是委托参数类型的基类.