js常用的三个鼠标坐标获取方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了js常用的三个鼠标坐标获取方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

js获取鼠标坐标,javascript

在给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)

以页面作为为参考系，与可视窗口不一样，是以整个页面的左上角作为参考系，不随滚动条改变而改变,就是一开始页面的左上角。文章来源地址https://www.toymoban.com/news/detail-702704.html

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

到了这里，关于js常用的三个鼠标坐标获取方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！