案例局部获取坐标位置和全局获取坐标位置

最新推荐文章于 2024-06-12 08:40:58 发布

Girasoless

最新推荐文章于 2024-06-12 08:40:58 发布

阅读量217

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Girasoles/article/details/128008952

版权

这篇博客介绍了如何在网页中全局和局部获取鼠标坐标。通过JavaScript的onmousemove事件监听，实时更新X轴和Y轴的坐标值，展示在页面上。局部坐标获取则针对特定元素进行监听，展示了在不同元素内获取坐标的方法。

摘要由CSDN通过智能技术生成

一、全局获取坐标位置

 <h1>
        X 轴的坐标位置是 : <span class="x">0</span> <br> 
        Y 轴的坐标位置是 : <span class="y">0</span>
 </h1>

    <script>

        // 获取元素
        var x = document.querySelector('.x')
        var y = document.querySelector('.y')

        // 添加事件
        document.onmousemove = function (e) {
            // 事件对象兼容
            e = e || window.event
            // 获取坐标点
            var x1 = e.clientX
            var y1 = e.clientY

            // 修改span的文本内容
            x.innerText = x1
            y.innerText = y1
        }
    </script>

二、局部获取坐标点（比如Y轴局部）

    <p>x轴坐标是:<span class="x">0</span></p>
    <p>y轴坐标是:<span class="y">0</span></p>

    <script>
        var pbox = document.querySelectorAll('p')
        var xbox = document.getElementsByClassName('x')[0]
        var ybox = document.getElementsByClassName('y')[0]
        // 可以获得局部坐标点
        pbox.forEach(function(item){
            // console.log(item);
            item.addEventListener('mousemove',fn)    
        })
            function fn(e){
            e = e || window.event
            var x = e.clientX
            var y = e.clientY
            xbox.innerText = x
            ybox.innerText = y
        }
    </script>