當只有lastChild節點應該出現時，什麼導致我的圖像節點響應點擊？

我正在尋找一款迷你javascript來尋找差異遊戲。基本上，每個div中都有兩個div和圖像的笑臉，並且在左邊的div上總會有額外的笑臉。你必須點擊左邊那個額外的div。如果點擊其他任何地方或任何其他面孔，它應該提醒用戶並結束遊戲。當只有lastChild節點應該出現時，什麼導致我的圖像節點響應點擊？

所以，我看了w3schools和Stackoverflow，但我還沒有找到任何有用的東西。

我在這裏遇到的問題是我的代碼壞了。而不是隻檢測左邊div的lastChild上的.onclick。它正在檢測所有的臉部，因此每次添加5個笑臉。

我在這裏做錯了什麼？我使用chrome調試工具進行了檢查，但也找不到任何東西。

此外，當您點擊其他地方leftSide股利，它應該提醒用戶並結束遊戲。提醒後，它不會結束遊戲，也無法響應進一步的點擊，但仍會響應點擊並添加表情符號。

所有幫助表示讚賞。

P.S.這是我在Stackoverflow上的第二個問題。如果我沒有正確地格式化我的問題，我很抱歉。

<!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>

來源

2015-11-06 nastypluto

您正在將獲勝的onclick事件分配給左側的每個項目。如果你只是想將它添加到最後一個項目（這是不會被複制的），你需要告訴for循環這樣：

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/

來源

2015-11-06 08:14:16 sailens

哇，那太快了。非常感謝！有用。出於某種原因，我認爲「stopPropagation」方法會爲我做到這一點。新手錯誤。不管怎樣，謝謝你！ – nastypluto

@developertenzin'stopPropagation'方法可以防止de事件在DOM樹中向上升級，它不會影響元素的同胞。順便說一句，高興地幫助，不要忘記標記答案是正確的;） – sailens

哦，謝謝。是的，我正在讀它。它現在很有意義。是的，我標記爲正確，但由於我是Stackoverflow的新手，我需要至少15分才能將我的投票公開。我現在有13個。所以，還有兩點，它應該是公開的。如果不是，每當我得到2分時，如果它還沒有，我會標記它是正確的。再次感謝您的幫助。 – nastypluto

當只有lastChild節點應該出現時，什麼導致我的圖像節點響應點擊？

回答

相關問題