<!DOCTYPE HTML>
<html>
<head>
<title>案例:获取鼠标在盒子内的坐标</title>
<meta charset="utf-8" />
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 200px;
height: 200px;
background-color: pink;
margin-left: 100px;
margin-top: 100px;
}
</style>
</head>
<body>
<div id="box"> </div>
<script>
var box = document.getElementById('box');
document.addEventListener('click', function(e) {
var x1 = e.pageX;
var y1 = e.pageY;
var x2 = box.offsetLeft;
var y2 = box.offsetTop;
var x = x1 - x2;
var y = y1 - y2;
console.log(x + ',' + y);
})
</script>
</body>
</html>