具体的思路是:
1.得到鼠标所在的位置通过e.clientX,e.clientY来获得
得到当前盒子距离浏览器左边的距离,可以通过offsetLeft,offsetTop来获取,但是必须注意的是offsetLeft,offsetTop是相对于父级元素(这个父级元素具有定位属性)而言的,如果父级元素没有定位就一直网上找,直到找到具有定位的父级元素,如果多个父级元素同时有定位,那么将每一个得到的offsetLeft相加就会得到到浏览器的距离
用鼠标的位置 - 盒子到浏览器边缘的距离就会得到鼠标在盒子内的距离,
example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>求鼠标在盒子内的坐标</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0]
div.onclick = function (e) {
var event = e || window.event
var x = event.clientX - this.offsetLeft
var y = event.clientY -this.offsetTop
this.innerHTML = 'x=' + x + ', y='
}
</script>
</body>
</html>