《JavaScript学习笔记》：获取鼠标的位置及应用

来源：互联网发布：软件中心编辑：程序博客网时间：2024/05/17 09:20

《JavaScript学习笔记》：获取鼠标的位置及应用

获取鼠标的位置，方法如下：

    var x=event.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft);    var y=event.clientY+(document.documentElement.scrollTop||document.body.scrollTop);

其中，clientX、clientY为可视区的横轴和纵轴的长度。document.documentElement.scrollTop||document.body.scrollTop为带滚动条不可见的高度，而这里的‘||’是为了解决兼容性。

下面来看一个获取鼠标的位置的应用

功能：一个div块跟着鼠标移动，即鼠标在哪里，这个div块就跟到哪里。

实现代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    <html xmlns="http://www.w3.org/1999/xhtml">    <head>    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    <title>无标题文档</title>    <style>    #div1 {width:100px;height:200px;background:red;border:1px solid black;position:absolute}    </style>    <script>    window.onload=function()    {        document.onmousemove=function(ev)        {            var oDiv=document.getElementById('div1');            var oEvent=ev||event;            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//带滚动条不可见的高度            var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;//带滚动条不可见的高度            //clientX为可视区内鼠标距最左边的长度            //clientY为可视区的高度            oDiv.style.left=oEvent.clientX +scrollLeft+ 'px';            oDiv.style.top=oEvent.clientY+scrollTop + 'px';        };    };    </script>    </head>    <body style="height:2000px" >    <div id="div1">    asdf    </div>    </body>    </html>

为方便代码的重用，我们将获取鼠标的位置封装为一个函数，如下：

    function getXY(ev)    {        var res={};        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;        return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};    }

当我们想获取一个鼠标的位置时，直接调用上面的函数即可。

0 0