求鼠标在一个盒子内的坐标
2018-03-03 本文已影响0人
liquan_醴泉
具体的思路是：
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>
