JavaScript获取在盒子内点击的坐标
作者:
福心
,
2023-08-17 13:33:47
,
所有人可见
,
阅读 102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
position: relative;
margin: 56px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
let box = document.querySelector('.box');
box.addEventListener('click', function (e) {
let x = e.pageX;
let y = e.pageY;
let boxX = this.offsetLeft;
let boxY = this.offsetTop;
console.log(x - boxX, ' ', y - boxY);
})
</script>
</body>
</html>