<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSKing</title>
<style>
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: red;
position: absolute;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="circle"></div>
<script>
var main = function () {
var circle = document.querySelector(".circle");
document.body.addEventListener("click", function(event) {
bw = document.body.clientWidth;
bh = document.body.clientHeight;
w = circle.clientWidth;
h = circle.clientHeight;
circle.clientLeft = event.clientX + 'px';
circle.clientTop = event.clientY + 'px';
if (event.clientX + w > bw) {circle.clientLeft = bw - w + 'px';}
if (event.clientY + h > bh) {circle.clientTop = bh - h + 'px';}
});
}
main();
</script>
</body>
</html>
پاسخ با نقل قول