JS 实时获取鼠标所在坐标

最新推荐文章于 2025-09-02 10:48:53 发布

原创最新推荐文章于 2025-09-02 10:48:53 发布 · 1.5w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #鼠标坐标

【初级】前端专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一种获取鼠标位置的方法，并展示了如何判断鼠标相对于特定DOM元素的位置，包括上方和右方的情况。

背景

有时我们希望实时获取鼠标所在的位置，用来判断鼠标是不是在一个dom元素的上、下、左、右。
那么如何实现获取鼠标所在位置呢？

代码示例

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    return { 'x': x, 'y': y };
}

接下来呢，再做一点扩展，沿着上述问题的引入，假如我需要判断鼠标是否在dom元素#target的上方或者右方呢？

 var target_position = $('#target').offset();
 var top = target_position.top;//计算target的top
 var left = target_position.left;//计算target的left
 var left_side = left + $('#target').width();//计算target的宽度，这是因为我要判断的鼠标位置可能位于target的右方，如果是左方，则无需left_side,left就好
 var hand_position = getMousePos(e);
 var y = hand_position.y;
 var x = hand_position.x;
 if(top > y || left_side < x){
	 //此时鼠标位于target的上方或右方
 }