javascript - RemoveEventListener 不删除事件

Question

下面的代码应该在轮到玩家手中的每张扑克牌时添加一个事件监听器，然后在轮到其他玩家时删除事件。

它不起作用。一旦事件在第一回合初始设置，该玩家的牌就保持可点击状态。

takeTurn ( playerIndex ) {
    console.log(this.name);
    let handCards = document.getElementById(this.name).querySelector('.handCards');
    let theCards = handCards.querySelectorAll('.handCards .card');
    let that = this;
    for ( let h = 0; h < theCards.length; h++ ) {
        theCards[h].addEventListener("click", function onPlayCard (){
            let theseCards = handCards.querySelectorAll('.handCards .card');
            let discarded = that.playCard(theCards[h], theseCards, handCards);

            that.gameInstance.discardPile.push(discarded);
            console.log(that.gameInstance.discardPile);
            for ( let e = 0; e < theseCards.length; e++) {
                theseCards[e].removeEventListener("click", onPlayCard, false);
            }
            console.log(that.name + 'is done');
            that.gameInstance.nextPlayer( playerIndex );
        }, false);
    }
}

我尝试了 here 中的一些想法和 here ，但都没有完全解决问题。

如有任何帮助，我们将不胜感激。我可能很快就会把头发拔掉。我以为我知道这些东西。

Answer 1

问题:

问题是您向每张卡添加了一个唯一的函数实例，但随后尝试仅使用单击的卡的函数实例将它们全部删除。这只会删除一张与添加到单击的卡中的实例实际匹配的卡。

因此，元素 0 获取处理程序 0，元素 1 获取处理程序 1，元素 2 获取处理程序 2，依此类推...

当单击一个元素(例如元素 2)时，您将迭代所有元素以删除其处理程序，但您要为被单击的元素(元素 2)提供处理程序。处理程序 2 仅用于删除元素 2，而不是其他元素。

<小时/>

解决方案:

根据您当前的代码，我实际上不会给出解决方案，只是说它将涉及维护与它们绑定(bind)到的元素并行的处理程序数组。它会工作得很好，但我认为重新设计应用程序可能会更好。

<小时/>

不同的方法:

IMO，重复绑定(bind)和取消绑定(bind)表明在设计应用程序时需要采取不同的方法。

您可以采用面向对象的方法，并将应用中的每种类型的项目表示为“类”(构造函数)。因此，您将使用 Game 来管理整个游戏，Card 代表纸牌的每个实例，以及 Player 来代表每个纸牌实例。玩家。

为每张卡片创建一个 Card 实例。也许还有其他特殊的，例如用于丢弃堆的Dealer或Deck和Discard。 Card 可以具有表示其值和花色的属性，以及引用该卡的当前持有者的 .owner 属性。例如，.owner 可以是 Player、Discard 堆或 Deck。

Game 引用了所有这些对象，以便它可以协调它们。它通过将 .owner 从 Deck 更改为某个 Player 来发牌。当玩家丢弃卡牌时，该卡牌的.owner将更改为Discard。

所以基本上每个对象都维护自己的“状态”。

每个项目还可以引用其 DOM 元素，您可以将处理程序绑定(bind)到该 DOM 元素。处理程序将通过 this 引用 DOM 元素，但它还需要引用其关联实体的数据。大多数人会为每个对象创建一个单独的处理程序，并使用闭包来引用数据。我个人会使用一个鲜为人知但非常有用的功能，称为事件监听器接口(interface)。我将把这个话题留给你来研究。

具体如何设置取决于您。 游戏是否应该将.owner分配给卡？还是经销商？或者应该将Card传递给所有者(例如Player)并为其分配.owner属性？或者 Card 是否应该有一个方法来接收其新所有者并将其分配给自己的 .owner 属性？由你决定。

无论如何，希望这能给你一些想法。