如何通过JavaScript实现点击Body时将Div定位到点击坐标

嘿，我明白你的需求啦！你现在的代码只能点击红色Div本身时才会移动它，原因是你把点击事件直接绑定在了这个Div元素上。要实现点击页面Body任意位置都能移动这个Div，只需要把事件监听对象换成document或者body，然后调整事件处理函数里的目标元素即可。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        #elem {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            position: absolute;
            top: 0;
            left: 150px;
        }
    </style>
</head>
<body>
    <div id="elem"></div>

    <script>
        var elem = document.getElementById("elem");
        // 把事件绑定到document上，点击页面任何地方都会触发
        document.onclick = function(event) {
            var x = event.clientX;
            var y = event.clientY;
            // 直接操作elem的样式，而不是用this（现在this指向document）
            elem.style.top = y + 'px';
            elem.style.left = x + 'px';
        };
    </script>
</body>
</html>

关键修改点说明 #

• 事件绑定对象变更：原来的elem.onclick只会在点击Div本身时触发，改成document.onclick后，点击页面的任何区域（包括空白处）都会触发移动逻辑。如果只想限制在Body区域，也可以换成document.body.onclick。
• 避免this指向问题：因为现在事件绑定在document上，this会指向document而不是Div，所以要直接通过elem变量来修改样式，而不是用this.style。

额外优化（可选） #

如果你希望Div的中心点对齐点击位置（而不是左上角），可以调整坐标计算：

document.onclick = function(event) {
    var x = event.clientX;
    var y = event.clientY;
    // 减去Div自身宽高的一半，让中心点对齐点击位置
    elem.style.top = (y - elem.offsetHeight / 2) + 'px';
    elem.style.left = (x - elem.offsetWidth / 2) + 'px';
};

这样就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Marie