我希望图像随鼠标一起移动，但是当鼠标单击任意位置一次时，图像停止跟随；当鼠标再次单击时，它开始跟随。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Mousemove">
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$(document).click(function(e) {
$(".image").mousemove({ top: e.pageY, left: e.pageX });
});
});
</script>
</head>
<body>
<img class="image" src="../images/food%20photgraphy2.jpg" height="50px" width="55px" alt="food">
</body>
</html>如您所见，当鼠标移动时，图像不会随鼠标一起移动，并且我无法在任何位置单击。为什么我的代码不起作用？
我希望图像随鼠标一起移动，但是当鼠标单击任意位置一次时，图像停止跟随；当鼠标再次单击时，它开始跟随...
[正如您在本摘要中所看到的，单击文档后，我添加了一个类，并基于此我们更改了元素位置bind/unbind mousemove事件，并且还基于交替单击来删除添加的类或不删除该类，我认为这就是您想要的：
单击事件之间的切换，将鼠标移动与addClass（'image'）一起嵌套在一个实例中，然后在另一个实例中将removeClass（'image'）嵌套在一个实例中。