<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. SQL中关于字符串的处理

    DECLARE @STR VARCHAR(MAX),@PRAM VARCHAR(20)SET @STR='中华人民共和国万岁'--字符串连接SET @STR=@STR+'an'+@STR --字符串拆 ...

  2. codeforces 507B. Painting Pebbles 解题报告

    题目链接:http://codeforces.com/problemset/problem/509/B 题目意思:有 n 个piles,第 i 个 piles有 ai 个pebbles,用 k 种颜色 ...

  3. ubunto安装pycharm

    转载:http://www.cnblogs.com/zhcncn/p/4027025.html 1. 下载 http://www.jetbrains.com/pycharm/download/ 选择L ...

  4. mysql常用函数整理

    一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 ) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x的最小整数 SELECT CEIL( ...

  5. osgconv 批量转换

    @echo offfor /f "delims=" %%i in ('dir/b *.osg') do ( "osgconv.exe" "%%~ni. ...

  6. 3ds max 分离对象

    转换为可编辑面片,将编辑环境设置为以下状态: 选中所需面片,分离

  7. 在Eclipse中创建Maven多模块工程的例子

    .配置eclipse的maven .在Eclipse里面New -> Maven Project -> 选择“Create a simple project” Group Id: com. ...

  8. 靶形数独（codevs 1174）

    1174 靶形数独 2009年NOIP全国联赛提高组  时间限制: 4 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Descri ...

  9. Swift - UIViewController

    UIViewController类详解: 通过Nib文件初始化 init(nibName nibName: String?, bundle nibBundle: NSBundle?) println( ...

  10. Xcode因为证书问题经常报的那些错

    去开始做 iOS开发的时候,因为证书问题 Xcode 经常报这样或那样的错,经过实践,现在看见 Xcode 报错已经心平气和了,经常报的错就那么多,整理一下. 1. 确认下证书是不是开发证书,如果是发 ...