<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
width:100%;
height:600px;
background-color:#f1f1f1;
}
.box {
width:400px;
height:400px;
background-color:coral;
}
.mini {
width:100px;
height:100px;
background-color:green;
}
</style>
</head>
<body>
<div class="box">
<div class="mini">
</div>
</div>
<script type="text/javascript">
"use strict";
let fn = null;
let coordsY, coordsX;
window.addEventListener("mousemove", (e) => {
coordsX = e.clientX;
coordsY = e.clientY;
});
document.querySelector(".box").addEventListener("mousedown", function(e) {
let el = e.target;
console.log(e.clientY);
fn = setInterval(function() {
elPos(e);
}, 1000);
window.addEventListener("mouseup", () => {
clearInterval(fn);
});
});
function elPos(e) {
console.log(e.target);
console.log(coordsX);
console.log(coordsY);
}
</script>
</body>
</html>
