堆栈内存溢出
  繁体   English   中英

如何做到这一点，以便for循环中的事件侦听器每次单击将一项推入数组

[英]how to make it so event listener within for loop pushes one item per click to array

 原文  2019-04-27 19:57:44  9   2    javascript/ html/ css

问题描述

我正在尝试创建用户单击的图像类名称数组。 我正在使用“ 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并将其存储在数组中，但是每次单击都会以指数方式增长。 下面的控制台日志总共记录了3次单击。 我在第一次单击时单击了第一个列，在第二次单击时单击了第二个列，在第三次单击时单击了第三个列。 

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”，“ col-3 col”，“ col-3 col” ]

2 个解决方案

解决方案1
 1  2019-04-27 20:05:42

在wrapperNode的click事件中，您正在向窗口添加事件侦听器。 每当有人单击wrapperNode时，都会添加一个新的事件侦听器，但永远不会删除它。 这将解释成倍增加的产出。 我不确定您要完成什么，但我认为您应该在添加新事件监听器之前先删除先前的事件监听器，或者只应应用一次内部事件监听器，而不是在每次单击wrapperNode时都添加它。

解决方案2
 0  2019-04-27 20:42:23

使用jQuery，它看起来像这样

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

var list = [];

$('.img').click(function(e){
    list.push( this.className.replace('img','') );
    console.log(list.toString());
});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何遍历一个数组，该数组一次一个地触发数组中每个项目的单击事件 点击循环事件监听器 如何让循环等待事件监听器？ 如何在JavaScript中的事件监听器中使for循环工作 如何使用事件侦听器单击功能使用javascript显示和隐藏数组中的图像 循环遍历数组并添加事件侦听器“click”到每个 事件监听器class的变化只是暂时的，classList.replace只是一次点击，如何让它永久化 制作<li>列出 object VueJs 中的每个数组项</li> 如何遍历所有按钮到单击事件侦听器 for 循环中的事件侦听器如何一直运行？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM