堆棧內存溢出
  簡體   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  4   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