javascript获得鼠标的坐标值

最新推荐文章于 2021-06-04 21:45:52 发布

无效的名字

最新推荐文章于 2021-06-04 21:45:52 发布

阅读量648

点赞数

本文介绍了两种获取鼠标点击位置坐标的方法：一种是相对于浏览器窗口（body）的坐标获取方式，另一种则是相对于特定DOM元素的坐标获取方式。通过JavaScript实现了具体的功能，并考虑了不同浏览器之间的兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://www.cnblogs.com/waitingbar/archive/2012/10/02/2710443.html

一、需求：

    1、当需求为获得的坐标值相对于body时实现方法

    2、当需求为获得的坐标值相对于某一对象时实现方法

二、实现：

    var x , y;

    //当需求为获得的坐标值相对于body时，用：
    function positionBody(event){

        event = event||window.event;
        //获得相对于body定位的横标值；

        x=event.clientX
        //获得相对于body定位的纵标值；
        y=event.clientY
    }



    //当需求为获得的坐标值相对于某一对象时，用：
    function positionObj(event,id){

        //获得对象相对于页面的横坐标值；id为对象的id
        var thisX = document.getElementById(id).offsetLeft;

        //获得对象相对于页面的横坐标值；
        var thisY = document.getElementById(id).offsetTop;

        //获得页面滚动的距离；
        //注：document.documentElement.scrollTop为支持非谷歌内核；document.body.scrollTop为谷歌内核
        var thisScrollTop = document.documentElement.scrollTop + document.body.scrollTop;

        event = event||window.event;
        //获得相对于对象定位的横标值 = 鼠标当前相对页面的横坐标值 - 对象横坐标值；

        x = event.clientX - thisX;

        //获得相对于对象定位的纵标值 = 鼠标当前相对页面的纵坐标值 - 对象纵坐标值 + 滚动条滚动的高度；
        y = event.clientY - thisY + thisScrollTop;

    }