Question

我有这段代码，它会触发悬停的卡上的翻译，并在所有卡上都单击了事件监听器。

但是听众没有被移走，卡片继续移动。

出于复杂的原因，我必须采用这种方式而不是使用CSS。

static bindEvents() {
        const playableCards = Hand.cards.filter(card => card.isPlayable)
        playableCards.forEach(card => {
            let onMouseEnter = () => {
                card.triggerTranslate(true)
            }
            let onMouseLeave = () => {
                card.triggerTranslate(false)
            }
            card.imgElt.addEventListener('mouseenter', onMouseEnter)
            card.imgElt.addEventListener('mouseleave', onMouseLeave)
            card.imgElt.addEventListener('click', () => {
                playableCards.forEach((card) => {
                    card.imgElt.removeEventListener('mouseenter', onMouseEnter)
                    card.imgElt.removeEventListener('mouseleave', onMouseLeave)
                })
            })
        })
    }

Answer 1

问题是您要为每张卡创建一对新处理程序，但是仅使用一张卡的处理程序尝试从中删除处理程序>所有元素。那是行不通的，因为您只将这对处理程序附加到一个元素。

一种解决方案是记住数组中的处理程序，以便以后可以将其删除。这样的事情（请参阅评论）：

static bindEvents() {
    // Use a single click ahndler for all elements, since you want to
    // do the same thing for all of them.
    const onClick = () => {
        forRemoval.forEach(({imgElt, onMouseEnter, onMouseLeave}) => {
            imgElt.removeEventListener('mouseenter', onMouseEnter);
            imgElt.removeEventListener('mouseleave', onMouseLeave);
            imgElt.removeEventListener('click', onClick); // Maybe?
        });
    };
    // Add the handlers, get the info we'll need to remove them
    const forRemoval = Hand.cards
        .filter(card => card.isPlayable)
        .map(card => {
            const {imgElt} = card;
            const onMouseEnter = () => {
                card.triggerTranslate(true)
            };
            const onMouseLeave = () => {
                card.triggerTranslate(false)
            };
            imgElt.addEventListener('mouseenter', onMouseEnter);
            imgElt.addEventListener('mouseleave', onMouseLeave);
            imgElt.addEventListener('click', onClick);
            return {imgElt, onMouseEnter, onMouseLeave};
        });
}

在addEventListener中作用域的removeListener不起作用

1 个答案: