在希望的田野上，我们看到了希望，看到了未来，看到了祖国未来繁荣昌盛的景象。
通过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>
代码解释：
1、clientX、clientY 获取鼠标在当前 body 内可视区域的x，y坐标
2、offsetLeft，offsetTop 获取指定元素与父元素边缘(如果不指定父元素，则默认body边缘)的距离（左边距与上边距）
3、通过鼠标与 body 的 x 与 y 的坐标，减去元素距离 body 左边距与上边距来计算出鼠标在元素内的坐标！
4、注：如果使用 offsetLeft 与 offsetTop 方法的元素在指定父元素时，只需要给父元素加个 “position: relative;”CSS样式即可！
到此这篇关于javascript获取在指定元素内鼠标坐标位置的方法就介绍到这了。无论你有多少朋友，不能少了书这个诤友。更多相关javascript获取在指定元素内鼠标坐标位置的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
