gpt4 book ai didi

javascript - 为什么 onclick 事件监听器被删除?

转载 作者:行者123 更新时间:2023-11-27 23:48:50 25 4
gpt4 key购买 nike

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

即使在我通过首先删除旧节点来刷新所有节点之后,我也希望监听器能够附加到 ID 为“leftSide”的 div 的最后一个子元素。

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

最佳答案

问题是当你将一个事件处理程序附加到一个元素时,当该元素被销毁时,事件也会消失(当 GC 清理时)。 theLeftSide.lastChild 不会创建对 theLeftSide 的最后一个子元素的引用。它创建对当前最后一个子级的引用。

您必须更改在 generateFaces 函数中添加事件处理程序的位置,因此每次更改 theLeftSide 子项时,您都会再次获得最后一个子项,并添加事件。

看一下下面的示例:

<!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) { ,然后在 generateFaces 函数中添加事件处理程序:theLeftSide.lastChild.onclick = nextLevel;

关于javascript - 为什么 onclick 事件监听器被删除?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32892415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com