文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何让for循环中的事件侦听器在每次单击时都将一项推送到数组

问如何让for循环中的事件侦听器在每次单击时都将一项推送到数组
EN

Stack Overflow用户
提问于 2019-04-28 03:57:44
回答 2查看 38关注 0票数 0

我正在尝试创建一个用户已单击的图像类名称数组。我使用了一个'for‘循环和一个事件侦听器来完成这项工作。当单击其中一个图像时，其类名将添加到数组中，并在程序结束时显示数组中的项。

问题是，当我检查我的控制台日志时，每次日志都会记录多个事件，而不是单个新的选择。

为什么会发生这种情况，我该如何解决？

代码语言：javascript
复制
<!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>
代码语言：javascript
复制
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");
代码语言：javascript
复制
.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");
}

这应该记录用户选择的每一列，并将其存储在一个数组中，但它会随着每次单击而呈指数级增长。下面的控制台日志记录了总共三次点击。我在第一次点击时点击了第一列，第二次点击了第二列，第三次点击了第三列。

代码语言：javascript
复制
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"]

上图中，我的程序似乎在按指数方式记录所有内容。读数应为：

script.js:30 (2) "col-1 col"，"col-2 col"，"col-3 col“

相反，我得到的是：

script.js:30 (6) "col-1 col"，"col-2 col"，"col-2 col"，"col-3 col“

javascript
html
css
EN

回答 2

Stack Overflow用户

发布于 2019-04-28 04:05:42

在wrapperNode的单击事件中，您将向窗口添加一个事件侦听器。每次有人单击wrapperNode时，都会添加一个新的事件侦听器，但从未将其删除。这就解释了产量呈指数级增长的原因。我不确定你想要完成什么，但我认为要么你应该在添加新的事件之前删除之前的事件侦听器，要么你应该只应用一次内部的事件侦听器，而不是每次点击wrapperNode时都添加它。

票数 1
EN

Stack Overflow用户

发布于 2019-04-28 04:42:23

使用jquery时，它将如下所示

在创建每个图像时，只需为每个图像添加相同的类。这样你只需要一个事件。例如：‘'img’。您甚至可以在将'img‘字符串推送到数组之前将其删除。

代码语言：javascript
复制
var list = [];

$('.img').click(function(e){
    list.push( this.className.replace('img','') );
    console.log(list.toString());
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55884387

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档