Question

这是一段很大的代码，但如果你愿意放纵我：

<html>
  <head>
    <style>
      .mobile {position: absolute;}
    </style>
    <script>
      var images = new Array();
      image['Key1']='image1.png';
      image['Key2']='image2.png';
      image['Key3']='image3.png';
      image['Key4']='image4.png';
      image['Key5']='image5.png';

      function createAll()
      {
        tag = document.getElementById("canvas");
        for(var key in image)
        {
          var r = key;
          while(r.indexOf('_')>-1)
          {
            r=r.replace('_',' ');
          }

          let t = document.createElement("p");
          t.id=r;
          t.className="mobile"
          t.xVel = Math.floor(Math.random()*50-25);
          t.yVel = Math.floor(Math.random()*50-25);
          t.xPos = Math.floor(Math.random()*1000)-60;
          t.style.left= t.xPos;
          t.onclick="clickTag('"+r+"')";
          t.yPos=Math.floor(Math.random()*600)-42;
          ////THIS IS WHERE THE EVENT IS ADDED////
          t.addEventListener("onmousedown", function(){clickTag(t);});
          ////THIS IS WHERE THE EVENT IS ADDED////
          t.style.top=t.yPos;
          var i = document.createElement("img");
          i.src=image[key];
          var s = document.createElement("span");
          tag.appendChild(t);
          t.appendChild(i);
          t.appendChild(s);
          setTimeout(function() {step(t);},200);
        }
      }

      function restartMe(tag)
      {
         var x = Math.floor(Math.random()*1000);
         var y = Math.floor(Math.random()*600);
         var xVel = Math.floor(Math.random()*50-25);
         var yVel = Math.floor(Math.random()*50-25);

         var r = Math.random();
         if(r<.25)//left wall
         {
           x=-59;
           xVel = Math.floor(Math.random()*10);
         }
         else if(r<.5)//right wall
         {
           x=1059;
           xVel = -Math.floor(Math.random()*10);
         }
         else if(r<.75)//top wall
         {
           y=-41;
           yVel = Math.floor(Math.random()*10);
         }
         else//bottom wall
         {
           y=641;
           yVel = -Math.floor(Math.random()*10);
         }

         tag.xPos = x;
         tag.style.left=x;
         tag.yPos = y;
         tag.style.top=y;
         tag.style.xVel=xVel;
         tag.style.yVel=yVel;
         let t = tag;
         setTimeout(function() {step(t);},200);
      }

      function step(tag)
      {
        var x = tag.xPos;
        var y = tag.yPos;
        var dx = tag.xVel;
        var dy = tag.yVel;
        x+=dx;
        y+=dy;

        let t = tag;
        if(x<-60 || x>1060 || y<-42 || y>642)
        {
          x=-500;
          y=-500;
          tag.xPos=x;
          tag.yPos=y;
          tag.style.left=x;
          tag.style.top=y;
          setTimeout(function() {restartMe(t);},1000);
          return;
        }

        tag.xPos=x;
        tag.yPos=y;
        tag.style.left=x;
        tag.style.top=y;
        setTimeout(function() {step(t);},200);
      }

      function startGame()
      {
        var tag = document.getElementById("game");
        target = Object.keys(image)[Math.floor(Math.random()*Object.keys(image).length)];
        var r = target;
        while(r.indexOf('_')>-1)
        {
          r=r.replace('_',' ');
        }
        target=r;
        tag.innerHTML="Look for the "+target;
      }

      function clickTag(id)
      {
        ////HERE IS WHERE THE MOUSE EVENT SHOULD EXECUTE////
        if(id===target)
        {
          startGame();
        }
        var tag = document.getElementById("output");
        tag.innerHTML="No, that is the "+id;
      }
    </script>
  </head>
  <body onload="createAll();startGame()">
    <h2>What do you see?</h2>
    <p id="game"></p>
    <p id="output"></p>
    <p id="canvas" class="black" width="1000" height="600"></p>
  </body>
</html>

好的，这里＆＃39;破败不堪。我从数组中的几个图像文件名开始，其中一个键用于标识图像。当页面加载时，我将完成创建包含图像和点击事件的可移动p标签集的过程。每个标签都有一个超时，然后它们在屏幕上移动。当其中一个到达边界时，它会等待一秒钟，然后从其中一个边缘重新开始。这部分工作正常，但鼠标事件没有。

当我点击其中一个东西时，我一直在寻找鼠标事件，但一切都没有发生。我已经尝试将事件放在p和img上。我尝试过onmousedown，onmouseup，onclick等的各种变体，似乎没什么用。我可能错过了一些明显的东西，所以我很欣赏第二眼。

Answer 1

首先，addEventListener在字符串

中不使用“on”

t.addEventListener("mousedown", ...

现在您正确添加所有其他事件，并使用超时调用闭包，但是您构建了错误的click事件。

t.onclick="clickTag('"+r+"')";

即为事件侦听器分配字符串，它不绑定函数调用。

t.onclick= function () { clickTag(r); };

Answer 2

您的示例中只有createAll的一个实例，但它显示为函数声明，因此您永远不会实际执行createAll()，因此它不启用您的事件听众。

尝试将createOne()更改为createAll()。

<body onload="createOne();startGame()">

为什么鼠标事件不起作用

2 个答案: