Javascript/HTML在鼠标单击时将图像添加到中心位置

每当鼠标点击屏幕时，我想打印出一张图片。 这是我当前的Javascript和HTML代码。它只打印h1，我不知道我做错了什么

var image=document.getElementById（“im”）；//识别span元素
var roll=false；//要知道图像是否在移动，首先它不是移动状态，因此该值为false
image.addEventListener（“mousedown”，start，false）；//开始时，图像处于静止状态
函数mouse\u move（x）//用鼠标移动图像的函数
{
var newX=x.clientX；//复制鼠标x位置
var newY=x.clientY；//复制鼠标y位置
image.style.left=newY+“px”//为span（图像）指定最新的鼠标位置
image.style.top=newX+“px”；
}
函数start（x）//span（图像）启动无滚动模式
{
如果（滚动）{//鼠标移动时
document.removeEventListener（“mousemove”，mouse_move）；//初始化图像范围移动
滚，滚；
返回；
}
roll=！roll；//当鼠标不移动时
document.addEventListener（“mousemove”，mouse\u move，false）；
}

我的照片！
HTML文件随鼠标移动图像。

在

DOM

完成加载之前，您似乎试图通过id获取图像元素

我建议采取以下措施之一：

将

标记移动到页面底部

和

将

defer

添加到

标记，这将导致在DOM之后加载脚本

将JavaScript的第一个块移动到

DOMContentLoaded

事件侦听器中，如下所示

var roll=false；
var图像；
document.addEventListener（'DOMContentLoaded'，function（）{
image=document.getElementById（“im”）；
image.addEventListener（“mousedown”，start，false）；
});

您可以像这样使用AddEventListener函数

document.addEventListener("mousedown", mouse_move, false);   

addEventListener的语法为： addEventListener（“事件名称”，“函数名称，事件发生后要运行的函数”）

当需要在click事件中运行时，只需将事件名称从“mousedown”更改为“click”，例如： document.addEventListener（“单击”，鼠标移动，错误）

您必须使用“单击”事件而不是“鼠标向下” 比如：

document.addEventListener（“单击”，鼠标移动，错误）；

---

大家好，欢迎光临。我对标题和你想要达到的目标有点困惑。您是否正在尝试创建将功能拖动到图像？因此，当用户单击鼠标并移动鼠标时，图像应处于空闲状态，然后一旦用户释放鼠标，图像应保持在停止的位置？您好，不一定，我只想在页面上单击鼠标的任何位置放置一张图片您好，好的，这是我想要的图片，但是它是立即打印的，而不是在使用单击的任何位置。您首先需要将

span

设置为

position:fixed

，如下面的答案所示。那么它应该会起作用<代码>固定允许元素根据需要在屏幕上自由移动。（它的作用远不止于此，但不需要更多的解释）是的，OFC兄弟，你

<code>
        var image = document.getElementById("im"); 
            var roll = false; 
           image.addEventListener("click", start, false); 
    
            function mouse_move(x) 
            {
                var newX = x.clientX; // copies mouse x position
                var newY = x.clientY; // copies mouse y position
                image.style.left = newX + "px";
                image.style.top = newY+ "px";
            }
    
            function start(x) // span (image) starting no rolling mode
            {
                if (roll) { // when the mouse is moving
                    document.removeEventListener("click", mouse_move); // initiages image span move
                    roll = !roll;
                    return;
                }
                roll = !roll; // when the mouse is not moving
    
            }
            document.addEventListener("click", mouse_move, false);
</code>