<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. Html之head部分详解

    随便打开一个网页,右击查看网页源代码,总能看到<head>-</head>封闭标签,在里面通常会包含5类标签:title.link.script.meta.style.这5类标 ...

  2. 【python】入门学习（十）

    #入门学习系列的内容均是在学习<Python编程入门(第3版)>时的学习笔记 统计一个文本文档的信息,并输出出现频率最高的10个单词 #text.py #保留的字符 keep = {'a' ...

  3. 在Debian8.3中解决Odoo出现的问题：Unable to find Wkhtmltopdf on this system. The report will be shown in html.

    解决Odoo出现的问题:Unable to find Wkhtmltopdf on this system. The report will be shown in html. 下载wkhtmltop ...

  4. 在没装VS2010的机器上运行VS2010开发的C++程序

    在VS2010下写了一个win32控制台应用程序,编译ok.exe,需要依赖osg相关动态库 第一次编译的是Debug版本的,直接将ok.exe和osg相关dll文件拷贝到没有安装VS2010机器上运 ...

  5. 如何在MyEclipse中通过hibernate使用jtds驱动连接数据库，并向数据库添加数据的方法

    最近学习了下如何在MyEclipse中通过hibernate使用jtds驱动连接数据库,并向数据库添加数据的方法,虽然MyEclipse中自带了连接数据库的方法,我也尝试了下其他方法,如有不当之处请指 ...

  6. iOS应用架构谈（二）：View层的组织和调用方案（上）

    OS客户端应用架构看似简单,但实际上要考虑的事情不少.本文作者将以系列文章的形式来回答iOS应用架构中的种种问题,本文是其中的第二篇,主要讲View层的组织和调用方案.上篇主要讲View层的代码结构. ...

  7. July 2nd, Week 27th Saturday, 2016

    The beauty of the journey is found in the scenery along the way. 旅行之美在于沿途所见的风景. I remember that ther ...

  8. chaper3_exercise_Uva1585_score

    #include<iostream> #include<string> using namespace std; int main(void) { , j = ; string ...

  9. Codeforces Round #370 (Div. 2)（简单逻辑，比较水）

    C. Memory and De-Evolution time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  10. Mac使用入门

    mac常用快捷键 全屏/退出全屏 ctr+command+F 切换到桌面 fn+f11 输入法切换 ctr+空格 亮度 f1.f2 声音 f11.f12 复制.粘贴 command+c.command ...