html removeEventListener()无法在for循环中使用多个元素[Javascript]

cl25kdpy 于 2022-12-09 发布在 Java

关注(0)|答案(3)|浏览(118)

我一直在进行测试，看看您是否可以避免重复的事件侦听器
下面的代码循环遍历具有特定属性的所有按钮。
问题是它只适用于一个按钮

let LOGIC;
let removeListener = undefined;
let test = document.getElementById("test")
let allButtons = document.querySelectorAll("input[btn]")

function GameLogic(btn, test) {
test.innerHTML = eval(`${test.textContent} + 1`)
btn.value += "1"
}

let Apply = function() {
for (let i = 0; i < allButtons.length; i++) {
if (removeListener == true){
allButtons[i].removeEventListener("click", LOGIC)
}
LOGIC = GameLogic.bind(null, allButtons[i], test)
allButtons[i].addEventListener("click", LOGIC);
removeListener = true
}
}

document.getElementById("redo").addEventListener("click", Apply)

下面是HTML：

<input type = "button" id = "DIE" btn value = "Click Me">
<input type = "button" id = "DIE" btn value = "Click Me">
<input type = "button" id = "DIE" btn value = "Click Me">
<input type = "button" id = "DIE" btn value = "Click Me">
<button id = "redo"> Redo Function </button>
<p id = "test">0</p>

我尝试了很多不同的解决方案，但没有一个真正有效。
这个逻辑似乎把前面提到的代码加起来了。

Html

来源：https://stackoverflow.com/questions/74730711/removeeventlistener-not-working-with-multiple-elements-in-a-for-loop-javascri

3条答案

按热度按时间

pod7payv1#

首先，在函数Accept中，语句removeListener = true似乎放在了错误的位置。

let Apply = function () {
    for (let i = 0; i < allButtons.length; i++) {
        if (removeListener == true) {
            allButtons[i].removeEventListener("click", LOGIC)
        }
        LOGIC = GameLogic.bind(null, allButtons[i], test)
        allButtons[i].addEventListener("click", LOGIC);
        removeListener = true //Set as true for the first button
    }
}

代替：

let Apply = function () {
    for (let i = 0; i < allButtons.length; i++) {
        if (removeListener == true) {
            allButtons[i].removeEventListener("click", LOGIC)
        }
        LOGIC = GameLogic.bind(null, allButtons[i], test)
        allButtons[i].addEventListener("click", LOGIC);
    }
    removeListener = true //Set as true after the first loop has run
}

第二个问题是变量LOGIC。由于它在循环的每一步都被改变，当你点击Redo时，你得到的是最后一个按钮的值而不是第一个按钮的值。一个解决方案是使用这样的数组：

let LOGICS = []; //Now is an array
let removeListener = undefined;
let test = document.getElementById("test")
let allButtons = document.querySelectorAll("input[btn]")

function GameLogic(btn, test) {
    test.innerHTML = eval(`${test.textContent} + 1`)
    btn.value += "1"
}

let Apply = function () {
    for (let i = 0; i < allButtons.length; i++) {
        if (removeListener == true) {
            allButtons[i].removeEventListener("click", LOGICS[i])//So when your remove the event listener, it is the function you have used to add it who is passed
        }
        LOGICS[i] = GameLogic.bind(null, allButtons[i], test)
        allButtons[i].addEventListener("click", LOGICS[i]);
    }
    removeListener = true
}

document.getElementById("redo").addEventListener("click", Apply)

赞(0）回复(0）举报 2022-12-09

hm2xizp92#

id属性必须是唯一的。您有多个按钮具有相同的id（"DIE"）。这是不允许的，并且会使html无效

赞(0）回复(0）举报 2022-12-09

jq6vz3qz3#

在for循环中，你不需要将removeListener设置为true，而需要将其设置为true。在这里，你使用了一个LOGIC变量，它在每次迭代后都会改变，最后你得到了该变量的最后一个值。你可以使用一个效果更好的数组。

let LOGICS = [];
let removeListener = undefined;
let test = document.getElementById("test");
let allButtons = document.querySelectorAll("input[btn]");

function GameLogic(btn, test) {
    test.innerHTML = eval(`${test.textContent} + 1`);
    btn.value += "1";
}

let Apply = function () {
    for (let i = 0; i < allButtons.length; i++) {
        if (removeListener == true) {
            allButtons[i].removeEventListener("click", LOGICS[i]);
        }
        LOGICS[i] = GameLogic.bind(null, allButtons[i], test);
        allButtons[i].addEventListener("click", LOGICS[i]);
    }
    removeListener = true;
}

document.getElementById("redo").addEventListener("click", Apply);

JS array和DOM manipulation可能对您有用。

赞(0）回复(0）举报 2022-12-09

我来回答

html removeEventListener()无法在for循环中使用多个元素[Javascript]

3条答案

相关问题

热门标签

最新问答