0

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

var image = document.getElementById("im"); // idenfitifes span eleme nt                                                                                                                                   
var roll = false; // to know the image is moving or not , intitally it is not moving state hence value is false                                                                                           
image.addEventListener("mousedown", start, false); // at starting image is in rest                                                                                                                        

function mouse_move(x) // funciton to move image with mouse                                                                                                                                               
{
    var newX = x.clientX; // copies mouse x position                                                                                                                                                      
    var newY = x.clientY; // copies mouse y position                                                                                                                                                      
    image.style.left = newY + "px"; // assigns latest mouse position to span (image)                                                                                                                      
    image.style.top = newX + "px";
}

function start(x) // span (image) starting no rolling mode                                                                                                                                                
{
    if(roll){ // when the mouse is moving                                                                                                                                                                 
        document.removeEventListener("mousemove", mouse_move); // initiages image span move                                                                                                               
        roll = !roll;
        return;
    }
    roll = !roll; // when the mouse is not moving                                                                                                                                                         
    document.addEventListener("mousemove", mouse_move, false);
}
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8" />

<title> Picture of Me! </title>

</head>

<body>
  <h1> HTML File to move image along with mouse movement. </h1>
  <script type="text/javascript" src="h5j.js">

  <span id="im">
    <img src="https://static01.nyt.com/images/2020/04/27/us/politics/00-trump-cand-page/00-trump-cand-page-mediumSquareAt3X.jpg" height="120" width="120"></img>
  </span>
</body>
</html>

4

2 回答 2

1

您像这样使用 AddEventListener 函数

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

addEventListener 的语法是： addEventListener("Event Name", "Your Function name, the function you want to run after event occur")

当需要在点击事件中运行时，只需将事件名称从“mousedown”改为“click”，例如：document.addEventListener("click", mouse_move, false);

您必须使用“click”事件而不是“mousedown”，例如： document.addEventListener("click", mouse_move, false); 

<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>
于 2020-10-20T00:28:00.613 回答
0

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

我会建议以下之一：

  1. 将<script>标签移动到页面底部的</body>和之间</html>
  2. 添加defer到<script>标签，这将导致脚本在 DOM 之后加载。
  3. 将 JavaScript 的第一个块移动到DOMContentLoaded事件侦听器中，如下所示。
var roll = false;
var image;

document.addEventListener('DOMContentLoaded', function(){
    image = document.getElementById("im");                                                                                      
    image.addEventListener("mousedown", start, false);  
});
于 2020-10-20T00:04:59.477 回答