通过JS脚本,不仅仅可以获取鼠标在整个屏幕中的坐标位置,也可以获取鼠标在某个元素内的坐标位置,具体的实现方法可以查看下面的代码!

js 获取指定元素内鼠标坐标的位置

完整的示例代码:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
      <title>获取鼠标在Canvas中的坐标位置</title>
      <style>
        body{ padding: 100px; }
        #div1 { border: 1px solid #ccc; width: 200px; height: 200px; }
    </style>
</head>
<body>
  <div id="div1" onmousemove="get_div(event,this)"><span>飞鸟慕鱼博客</span></div>
    <div id="tip"></div>
    <script>
        function get_div(ev, obj) {
            m_clientX = ev.clientX - obj.offsetLeft;
            m_clientY = ev.clientY - obj.offsetTop;
            document.getElementById("tip").innerHTML = "鼠标坐标:X:" + m_clientX + " ,Y:" + m_clientY;
        }
    </script>
</body>
</html>

js获取在指定元素内鼠标坐标位置的方法

代码解释:

1、clientX、clientY 获取鼠标在当前 body 内可视区域的x,y坐标

2、offsetLeft,offsetTop 获取指定元素与父元素边缘(如果不指定父元素,则默认body边缘)的距离(左边距与上边距)

3、通过鼠标与 body 的 x 与 y 的坐标,减去元素距离 body 左边距与上边距来计算出鼠标在元素内的坐标!

4、注:如果使用 offsetLeft 与 offsetTop 方法的元素在指定父元素时,只需要给父元素加个 “position: relative;”CSS样式即可!