当只有lastChild节点应该响应点击时，是什么导致我的图像节点响应点击

What is causing my image nodes to be responsive to clicks when only the lastChild node is supposed to?

本文关键字：响应 节点 是什么 我的 图像 lastChild      更新时间：2023-09-26

我正在开发一个迷你javascript来寻找差异游戏。从本质上讲，每个div中都有两个div和微笑的图像，并且在左边的div上总是会有一个额外的微笑。你必须点击左边的那个额外的div。如果点击其他任何地方或任何其他人脸，它应该提醒用户并结束游戏。

因此，我查看了w3schools和Stackoverflow，但还没有发现任何有帮助的东西。

我遇到的问题是我的代码正在崩溃。而不是只在左div的lastChild上检测.onclick。它在所有人脸上检测，因此每次添加5个微笑。

我在这里做错了什么？我查看了chrome调试工具，也找不到任何东西。

此外，当您单击leftSidediv上的其他任何位置时，它应该会提醒用户并结束游戏。在发出警报后，它并没有结束游戏，对进一步的点击没有反应，而是仍然对点击和添加微笑做出反应。

感谢所有的帮助。

附言：这是我关于堆栈溢出的第二个问题。如果我的问题格式不对，我会提前道歉。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matching Game</title>
    <style>
      img {position:absolute;}
      #leftSide {
        position:absolute;
        width:500px;
        height:500px;
      }
      #rightSide {
        width: 500px;
        height: 500px;
        position:absolute;
        left: 500px;
        border-left: 1px solid black;
      }
    </style>
  </head>
  <body onload="generateFaces()">
    <h1>Matching Game</h1>
    <p>
      Find and click on the extra smiling face on the left.
    </p>
    <div id="leftSide">
    </div>
    <div id="rightSide">
    </div>

    <script type="text/javascript">
      var numberOfFaces = 5;
      var theLeftSide = document.getElementById("leftSide");
      var theRightSide = document.getElementById("rightSide");
      var theBody = document.getElementsByTagName("body")[0];
      function generateFaces() {
        for(var i=0; i<numberOfFaces; i++) {
          var img = document.createElement("img");
          img.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
          var y_position = Math.random() * 400;
          y_position = Math.floor(y_position);
          img.style.top = y_position + "px";
          var x_position = Math.random() * 400;
          x_position = Math.floor(x_position);
          img.style.left = x_position + "px";
          theLeftSide.appendChild(img);
          var leftSideImages = theLeftSide.cloneNode(true);
          leftSideImages.removeChild(leftSideImages.lastChild);
          theRightSide.appendChild(leftSideImages);
          theLeftSide.lastChild.onclick=
            function nextLevel(event) {

              while(theLeftSide.firstChild || theRightSide.firstChild) {
                theLeftSide.removeChild(theLeftSide.firstChild);
                theRightSide.removeChild(theRightSide.firstChild);
              };
              event.stopPropagation();
              numberOfFaces += 5;
              generateFaces();
            };
          theBody.onclick = function gameOver() {
            alert("Game Over!");
            theBody.onclick = null;
            theLeftSide.lastChild.onclick = null;
          };
        }
      }
    </script>
  </body>
</html>

您正在将获胜的onclick事件分配给左侧的每个项目。如果你只想把它添加到最后一个项目（不会被复制的项目），你需要告诉for循环so：

if (i === numberOfFaces - 1) {    
    theLeftSide.lastChild.onclick=
        function nextLevel(event) {
          while(theLeftSide.firstChild || theRightSide.firstChild) {
            theLeftSide.removeChild(theLeftSide.firstChild);
            theRightSide.removeChild(theRightSide.firstChild);
          };
          event.stopPropagation();
          numberOfFaces += 5;
          generateFaces();
        };
}

这是小提琴（我把alert改成了console.log，打开控制台查看输出）：http://jsfiddle.net/zhv38xrp/1/

相关文章：