<!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>鼠标点击浏览器空白处元素移动到点击位置</title> <style> div{ width: 100px; height: 100px; background: red; border-radius: 50px; position: absolute; top: 0; left: 0; } </style> </head> <body> <div id="superMan"></div> <script> let superMan = document.getElementById("superMan"); let clickX = 0,clickY = 0; let leaderX = 0,leaderY = 0; document.onclick = function(){ clickX = event.clientX - superMan.offsetWidth / 2; clickY = event.clientY - superMan.offsetHeight / 2; console.log(clickX,clickY) } setInterval(function(){ leaderX = leaderX + (clickX - leaderX) / 10; leaderY = leaderY + (clickY - leaderY) / 10; superMan.style.top = leaderY + "px"; superMan.style.left = leaderX + "px"; if(clickX < superMan.offsetWidth / 2 ){ clickX = 0; }if(clickY < superMan.offsetHeight / 2){ clickY = 0; } },10) </script> </body> </html>