Question

我正在用javascript制作一个小型的匹配游戏。为什么onclick侦听器在第一次成功尝试后停止工作。我该如何纠正这个问题。

我希望将侦听器附加到div的最后一个子元素，其中id为＃34; leftSide＆＃34;甚至在我通过首先删除旧节点刷新所有节点之后。

<!DOCTYPE html>
<html>
    <head>
        <title>Matching Game</title>
        <style>
            img {
                position: absolute;
            }

            div {
                position: absolute;
                width: 500px;
                height: 500px;
            }

            #rightSide {
                left: 500px;
                border-left: 1px solid black;
            }                    
        </style>        
    </head>
    <body>
        <h2>Matching Game</h2>
        <p>Click on the extra smile on the left</p>
        <div id="leftSide"></div>
        <div id="rightSide"></div>
        <script>
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            var theRightSide = document.getElementById("rightSide");

            function generateFaces() {
                for (var i=0; i<=numberOfFaces; i++) {
                    new_img = document.createElement("img");
                    new_img.src="smile.png";
                    new_img.style.top=String(Math.floor(Math.random()*400))+"px";
                    new_img.style.left=String(Math.floor(Math.random()*400))+"px";
                    theLeftSide.appendChild(new_img);                    
                }

                // Clone all images to right side
                leftSideImages = theLeftSide.cloneNode(true);
                leftSideImages.removeChild(leftSideImages.lastChild);
                theRightSide.appendChild(leftSideImages);
            }

            generateFaces()

            var theBody = document.getElementsByTagName("body")[0];

            theBody.onclick = function gameOver() {
                alert("Game Over!");

                theBody.onclick = null;
                theLeftSide.lastChild.onclick = null;
            };

            theLeftSide.lastChild.onclick = function nextLevel(event) {
                // remove child nodes
                while (theLeftSide.firstChild) {
                    theLeftSide.removeChild(theLeftSide.firstChild);
                }

                while (theRightSide.firstChild) {
                    theRightSide.removeChild(theRightSide.firstChild);
                }

                // new nodes
                event.stopPropagation();
                numberOfFaces += 5;
                generateFaces();
            };


        </script>
    </body>
</html>

Answer 1

你可以尝试这样的事情：

<!DOCTYPE html>
<html>
    <head>
        <title>Matching Game</title>
        <style>
            img {
                position: absolute;
            }

            div {
                position: absolute;
                width: 500px;
                height: 500px;
            }

            #rightSide {
                left: 500px;
                border-left: 1px solid black;
            }                    
        </style>        
    </head>
    <body>
        <h2>Matching Game</h2>
        <p>Click on the extra smile on the left</p>
        <div id="leftSide"></div>
        <div id="rightSide"></div>
        <script>
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            var theRightSide = document.getElementById("rightSide");

            var clickLastChild = function clickLastChild() {
                // remove child nodes

                theLeftSide.lastChild.onclick = function (event) {
                    while (theLeftSide.firstChild) {
                        theLeftSide.removeChild(theLeftSide.firstChild);
                    }

                    while (theRightSide.firstChild) {
                        theRightSide.removeChild(theRightSide.firstChild);
                    }

                    // new nodes
                    event.stopPropagation();
                    numberOfFaces += 5;
                    generateFaces();
                };
            };

            function generateFaces() {
                for (var i = 0; i <= numberOfFaces; i++) {
                    new_img = document.createElement("img");
                    new_img.src = "smile.png";
                    new_img.style.top = String(Math.floor(Math.random() * 400)) + "px";
                    new_img.style.left = String(Math.floor(Math.random() * 400)) + "px";
                    theLeftSide.appendChild(new_img);
                }

                // Clone all images to right side
                leftSideImages = theLeftSide.cloneNode(true);
                leftSideImages.removeChild(leftSideImages.lastChild);
                theRightSide.appendChild(leftSideImages);
                clickLastChild();
            }

            generateFaces();

            var theBody = document.getElementsByTagName("body")[0];

            theBody.onclick = function gameOver() {
                alert("Game Over!");

                theBody.onclick = null;
                theLeftSide.lastChild.onclick = null;
            };
            
            clickLastChild();

        </script>
    </body>
</html>

Answer 2

问题是当你将一个事件处理程序附加到一个元素时，当该元素被销毁时，事件也会消失（当GC清理时）。 Options +FollowSymLinks RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L]不会创建对theLeftSide.lastChild的最后一个子元素的引用。它会创建对当前最后一个孩子的引用。

您必须将添加事件处理程序的位置更改为theLeftSide函数内部，因此每次更改generateFaces子项时，您将再次获得最后一个子项，并添加事件。

看一下下面的例子：

＆＃13;

theLeftSide

＆＃13;

注意：我已经简单地将<!DOCTYPE html> <html> <head> <title>Matching Game</title> <style> img { position: absolute; } div { position: absolute; width: 500px; height: 500px; } #rightSide { left: 500px; border-left: 1px solid black; } </style> </head> <body> <h2>Matching Game</h2> <p>Click on the extra smile on the left</p> <div id="leftSide"></div> <div id="rightSide"></div> <script> var numberOfFaces = 5; var theLeftSide = document.getElementById("leftSide"); var theRightSide = document.getElementById("rightSide"); function generateFaces() { for (var i = 0; i <= numberOfFaces; i++) { new_img = document.createElement("img"); new_img.src = "http://www.webgranth.com/wp-content/uploads/2012/03/smile.png"; new_img.style.top = String(Math.floor(Math.random() * 400)) + "px"; new_img.style.left = String(Math.floor(Math.random() * 400)) + "px"; theLeftSide.appendChild(new_img); } // Clone all images to right side leftSideImages = theLeftSide.cloneNode(true); leftSideImages.removeChild(leftSideImages.lastChild); theRightSide.appendChild(leftSideImages); theLeftSide.lastChild.onclick = nextLevel; } generateFaces() var theBody = document.getElementsByTagName("body")[0]; theBody.onclick = function gameOver() { alert("Game Over!"); theBody.onclick = null; theLeftSide.lastChild.onclick = null; }; function nextLevel(event) { // remove child nodes while (theLeftSide.firstChild) { theLeftSide.removeChild(theLeftSide.firstChild); } while (theRightSide.firstChild) { theRightSide.removeChild(theRightSide.firstChild); } // new nodes event.stopPropagation(); numberOfFaces += 5; generateFaces(); }; </script> </body> </html>更改为一个简单的函数声明：theLeftSide.lastChild.onclick = function nextLevel(event) {，然后在function nextLevel(event) {函数中添加了事件处理程序：{{1} }。

Answer 3

我在这里完全正常工作jsfiddle

您还必须通过游戏方案调用generateFaces()。是的，正如@epascarello所提到的，当你将它们设置为空时，你正在丢失点击事件。

Answer 4

因为您将onclick设置为false

theBody.onclick = null;
theLeftSide.lastChild.onclick = null;

单击tbody时

。

为什么onclick事件侦听器被删除？

4 个答案: