获取鼠标指针坐标

适合人群

需要用到的知识点:

• pageX
• offsetX
• scrollLeft
• getContext("2d")
• addEventListener("mousemove", e => {})
• querySelector()

如果以上知识都掌握,那么就开始吧~

正文

创建函数

window.tools.getMouse = element => {
    // 保存 x 轴坐标和 y 轴坐标
    const mouse = { x: 0, y: 0 };
    // ...
}

创建监听器

鼠标移动事件: mousemove

element.addEventListener("mousemove", event => {
    const e = event || window.event;
})

获取鼠标在页面上的坐标

e.pageX

element.addEventListener("mousemove", event => {
    const e = event || window.event;
    
    let x,y;
    
    // 确保浏览器支持: e.pageX
    if (e.pageX || e.pageY) {
        x = e.pageX;
        y = e.pageY;
    }
})

浏览器不支持 pageX

那么可以选择下面的计算方式:

e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;

e.clientX 返回的是鼠标光标相对于浏览器窗口左上角的横向坐标位置。

如果元素存在横向滚动（相对于视口），采取 document.body.

如果页面文档存在横向滚动，即浏览器宽度小出现横向滚动条，采取 document.documentElement.

将三者相加，才是鼠标相对于页面（0，0）处的 pageX。

---

补充完整吧：

element.addEventListener("mousemove", event => {
    const e = event || window.event;
    
    let x,y;
    
    // 确保浏览器支持: e.pageX
    if (e.pageX || e.pageY) {
        x = e.pageX;
        y = e.pageY;
    } else {
        // 兼容
        x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
})

改变原点坐标

有时候我们计算鼠标坐标的原点，不想从页面（0，0）处算起，而是从某个元素内部的鼠标位置。

比如： canvas 内部鼠标位置。

获取 canvas 偏移量： offsetX & offsetY;

只需要 pageX 减去 offsetX 即可。

从图中我们可以清晰地了解到计算某个元素内部的鼠标的坐标值。

x -= element.offsetX;
y -= element.offsetY;

正文结束，实践开始！

创建 html 结构：

<div class="box">
    <canvas id="canvas" width="200" height="150"></canvas>
    <p id="txt"></p>
</div>

创建 css 代码：

.box {
    text-align: center;
    margin: 100px auto;
}

canvas {
    border: 1px solid gray;
}

创建 js 文件：

window.tools = {};

window.tools.getMouse = element => {
    const mouse = {x: 0, y: 0};
    
    element.addEventListener("mousemove", event => {
        const e = event || window.event;
        let x,y;
        
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        
        x -= element.offsetLeft;
        y -= element.offsetTop;
        
        mouse.x = x;
        mouse.y = y;
    });
    
    return mouse;
}

const cnv = document.querySelector("#canvas");
const txt = document.querySelector("#txt");
const mouse = tools.getMouse(cnv);

cnv.addEventListener("mousemove", () => {
    txt.innerHTML = `鼠标坐标：(${mouse.x}, ${mouse.y})`;
}, false);