我正在尝试创建一个用户单击的图像类名称数组。我正在使用"for"循环和事件侦听器来执行此操作。单击其中一个图像时，其类名将添加到数组中，并在程序结束时显示数组中的项。
问题是，当我检查控制台日志时，每次日志都会记录多个事件，而不是单个新选择。
为什么会发生这种情况，我该如何解决？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>JavaScript Discovery Project</title>
<link rel="stylesheet" href="css/stylesheet.css"/>
</head>
<body>
<div class="wrapper">
<div id="main-container" class="set-1 set-wrapper">
<div id="col-1" class="col-1 col">
</div>
<div id="col-2" class="col-2 col">
</div>
<div id="col-3" class="col-3 col">
</div>
</div>
</div>
<script src="./js/script.js"></script>
</body>
</html>
var wrapperNode = document.querySelector("#main-container");
function imageSwapper(oldClass, newClass) {
console.log("in imageSwapper");
wrapperNode.classList.remove(oldClass);
wrapperNode.classList.add(newClass);
}
var resultsArray = [];
console.log(wrapperNode);
wrapperNode.addEventListener("click", function() {
console.log("wrapperNode Clicked");
window.addEventListener("click", function(event) {
console.log("window listener");
console.log(event);
console.log(event.toElement.className);
resultsArray.push(event.toElement.className);
console.log(resultsArray);
});
if (wrapperNode.classList.contains("set-1")) {
console.log("set-1 if");
imageSwapper("set-1", "set-2");
} else if (wrapperNode.classList.contains("set-2")) {
console.log("set-2 if");
imageSwapper("set-2", "set-3");
} else if (wrapperNode.classList.contains("set-3")) {
console.log("set-3 if");
imageSwapper("set-3", "set-4");
.set-1 .col-1 {
background-color: blue;
}
.set-1 .col-2 {
background-color: blueviolet;
}
.set-1 .col-3 {
background-color: red;
}
.set-2 .col-1 {
background-image: url("../img/stone.jpg");
}
.set-2 .col-2 {
background-image: url("../img/bread.jpg");
}
.set-2 .col-3 {
background-image: url("../img/pillow.jpg");
}
.set-3 .col-1 {
background-image: url("../img/polkaDots.jpg");
}
.set-3 .col-2 {
background-image: url("../img/wavePattern.jpg");
}
.set-3 .col-3 {
background-image: url("../img/squares.jpg");
}
.set-4 .col-1 {
background-image: url("../img/pencilTip.jpg");
}
.set-4 .col-2 {
background-image: url("../img/blankPage2.jpg");
}
.set-4 .col-3 {
background-image: url("../img/eraser.jpg");
}
这应该记录用户选择的每个 col 并将其存储在数组中，但每次单击时它都会呈指数级增长。下面的控制台日志总共记录了三次单击。我在第一次点击时点击了第一个 col，在第二次点击时点击了第二个 col，在第三次点击时点击了第三个 col。
hello
script.js:21 <div id="main-container" class="set-1 set-wrapper">…</div>
script.js:23 wrapperNode Clicked
script.js:34 set-1 if
script.js:16 in imageSwapper
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 429, screenY: 486, clientX: 409, clientY: 348, …}
script.js:28 col-1 col
script.js:30 ["col-1 col"]
script.js:23 wrapperNode Clicked
script.js:38 set-2 if
script.js:16 in imageSwapper
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 879, screenY: 501, clientX: 859, clientY: 363, …}
script.js:28 col-2 col
script.js:30 (2) ["col-1 col", "col-2 col"]
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 879, screenY: 501, clientX: 859, clientY: 363, …}
script.js:28 col-2 col
script.js:30 (3) ["col-1 col", "col-2 col", "col-2 col"]
script.js:23 wrapperNode Clicked
script.js:41 set-3 if
script.js:16 in imageSwapper
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 1437, screenY: 477, clientX: 1417, clientY: 339, …}
script.js:28 col-3 col
script.js:30 (4) ["col-1 col", "col-2 col", "col-2 col", "col-3 col"]
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 1437, screenY: 477, clientX: 1417, clientY: 339, …}
script.js:28 col-3 col
script.js:30 (5) ["col-1 col", "col-2 col", "col-2 col", "col-3 col", "col-3 col"]
script.js:26 window listener
script.js:27 MouseEvent {isTrusted: true, screenX: 1437, screenY: 477, clientX: 1417, clientY: 339, …}
script.js:28 col-3 col
script.js:30 (6) ["col-1 col", "col-2 col", "col-2 col", "col-3 col", "col-3 col", "col-3 col"]
上面，似乎我的程序正在指数级地记录所有内容。读数应为：
脚本.js：30 (2) ["Col-1 Col"、"Col-2 Col"、"Col-3 Col"]
相反，我得到的是：
脚本.js：30 (6) ["Col-1 Col"、"Col-2 Col"、"Col-2 Col"、"Col-3 Col"、"Col-3 Col"、"Col-3 Col"]
在 wrapperNode 的 click 事件中，您将向窗口添加一个事件侦听器。每次有人单击包装节点时，都会添加新的事件侦听器，但永远不会删除。这可以解释产出呈指数级增长的原因。我不确定您要完成什么，但我认为您应该在添加新事件侦听器之前删除以前的事件侦听器，或者您应该只应用一次内部事件侦听器，而不是每次单击wrapperNode时都添加它。
使用 jquery 它看起来像这样
创建每个映像时，只需向每个映像添加相同的类。这样，您只需要一个事件。例如。"哼"。您甚至可以在将"img"字符串推送到数组之前将其删除。
var list = [];
$('.img').click(function(e){
list.push( this.className.replace('img','') );
console.log(list.toString());
});