用js来获取鼠标实时移动位置和鼠标点击位置了

在我们的实际开发中，我们需要实时获取鼠标移动位置或者鼠标点击位置。下面我们用js获取鼠标实时移动位置和鼠标点击位置

首先获取鼠标点击的位置

您只需要监控页面点击，然后使用客户端获取X和Y坐标

  document.addEventListener("click", function (e) {
        console.log(e.clientX)
        console.log(e.clientY)
    })

这样就可以得到鼠标点击的X和Y值。

但是客户端得到的只是可见区域的X和Y坐标。如果页面有滚动条并且滚动条滚动，在页面上点击同一个位置，X和Y值不会改变，那么问题就来了。如何获取页面包括滚动条部分的X和Y坐标，这时候我们可以使用page，page就是获取这个页面的X和Y值，包括不可见区域。

document.addEventListener("click", function (e) {
        console.log(e.pageX)
        console.log(e.pageY)
    })

这里的结果是

获取鼠标点击的坐标，然后就可以获取鼠标实时移动的坐标

使用 mousemove 监控鼠标移动事件

document.addEventListener(mousemove,function (e) {
        //mousemove 只要鼠标一移动，就会触发事件
        //获取鼠标最新的坐标
        console.log(e.pageY)
        console.log(e.pageX);
    })

这样就完成了鼠标点击坐标和实时鼠标移动位置的获取

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-380130-1.html