脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标坐标

js鼠标坐标获取常用的三个方法

 更新时间：2023年09月05日 10:46:17   作者：ljxyydx  
这篇文章主要给大家介绍了js鼠标坐标获取常用的三个方法,在 JavaScript中当事件发生时获取鼠标的位置是件很重要的事件,需要的朋友可以参考下

js提供了多个获取鼠标点击事件的坐标获取方法

1.相当于你点击的元素来说 （e.offsetX和e.offsetY）

就是以你点击的元素的左上角作为参考系源点获取鼠标在元素中点击的位置

<style>
    div{
        width: 300px;
        height: 300px;
        background-color: rebeccapurple;
        color: wheat;
        margin: 300px auto;
    }
</style>
<body>
    <div>我的横坐标x:,我的纵坐标y:</div>
</body>
<script>
    var oDiv = document.querySelector('div')
        oDiv.onclick = function (e) {
            console.log(e.offsetX)
            console.log(e.offsetY)
            // 渲染函数 
            oDiv.innerHTML = '相对于我点击的这个元素来讲我的横坐标x:' + e.offsetX + ',我的纵                
坐标y:' + e.offsetY
        }
</script>

在给div添加点击事件，在点击事件中传入事件源e，e中保存着鼠标的点击坐标，我们用offsetX和offsetY就可以获取到鼠标在div中的点击坐标。

2.相对于浏览器可视窗口来说（e.clientX和e.clientY）

可视窗口是指浏览器能够看到内容的窗口，随着滚动条移动，可视窗口的位置也在随着变化，但是都是在以可视窗口的左上角的位置为参考系来获取鼠标的点击位置

oDiv.onclick = function (e) {
            console.log(e.clientX)
            console.log(e.clientY)
            // 渲染函数 
            oDiv.innerHTML = '相对于浏览器可视窗口来讲我的横坐标x:' + e.clientX + ',我的纵坐标y:' + e.clientY
        }

3.以页面左上角作为参考系(e.pageX 和 e.pageY)

以页面作为为参考系，与可视窗口不一样，是以整个页面的左上角作为参考系，不随滚动条改变而改变,就是一开始页面的左上角。

oDiv.onclick = function (e) {
            console.log(e.pageX)
            console.log(e.pageY)
            // 渲染函数 
            oDiv.innerHTML = '相对于页面来讲我的横坐标x:' + e.pageX + ',我的纵坐标y:' + e.pageY
        }

总结 

到此这篇关于js鼠标坐标获取常用的三个方法的文章就介绍到这了,更多相关js获取鼠标坐标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论