Javascript 如何将元素移动到鼠标位置

当用户单击文档时，我试图移动一个元素，但是，该元素正在移动到偏移位置。单击时如何删除偏移？我试图让元素移动到鼠标的准确位置，我该怎么做？我是否需要使用

.offset（）

函数？如果是的话，我会怎么做

HTML

Player Name:  <input type="text" name="name" id="name" /><br>
<button name="submt" id="meh">Submit</button>

---

设置其绝对位置并使用左偏移和上偏移（而不是边距）控制它可能要容易得多：

$（文档）.ready（函数（）{
$（此）。在（“单击”）上，函数（e）{
var x=e.pageX；
var y=e.pageY；
var el=$（“#meh”）；
el.css（‘位置’、‘绝对’）；
el.css（“左”，x）；
el.css（“顶部”，y）；
})
})

玩家姓名：


提交

使用左侧和顶部，同时确保使用绝对或相对定位：

$(document).ready(function(){
    $(this).on("click", function(e){
        var x = e.pageX;
        var y = e.pageY;
        $("#meh").css("left", x);
        $("#meh").css("top", y);
    })
})

---

你可以发布这些元素的css吗？我没有任何css样式设置。给它一个绝对位置并更改jquerycss属性修复了它。

$(document).ready(function(){
    $(this).on("click", function(e){
        var x = e.pageX;
        var y = e.pageY;
        $("#meh").css("left", x);
        $("#meh").css("top", y);
    })
})

<div class="soccer-field">
<div class="ball"></div>
</div>

var container = document.querySelector(".soccer-field");
container.addEventListener('click', function (event) {
  var x = event.clientX;
  var y = event.clientY;
  var ball = document.querySelector(".ball");
  ball.style.position = "absolute";
  ball.style.left = `${x}px`;
  ball.style.top = `${y}px`;
})