javascript - 无法使EventListener仅触发一次JavaScript

我试图建立一个仅触发一次的链接，以便可以将其更改为另一个EventListener。
当我按“ Show More”时，我希望删除当前的EventListener，因为由于与数组一起使用的解决方案，它现在将继续触发其他“ Show More-”链接。

这是我目前正在使用的功能，但我不觉得它会触发removeEventListener，因为我可以多次按下它。您可以在我的CodePen中看到

for (let i = 0; i < this.showMoreLinks.length; i++)
{
    this.showMoreLinks[i].addEventListener("click", function handler(e) {
        this.UpdateShowMore(i);
        e.currentTarget.removeEventListener(e.type, handler);
    }.bind(this));
}

完整代码：

https://codepen.io/indiehjaerta/pen/qoMLQK

也许这甚至不是最聪明的选择，所以其他任何代码建议也都适用。

最佳答案

我不认为您的绑定函数实际上与handler的定义相同，它返回已绑定到this的新函数，因此handler的定义未更改，因此在尝试删除时未找到。我建议使用箭头功能以避免在处使用绑定。所有：

let handler = e => {
    this.UpdateShowMore(i);
    e.currentTarget.removeEventListener(e.type, handler);
}
this.showMoreLinks[i].addEventListener( "click", handler );

这当然与绑定之前相同，并将绑定结果存储到变量中：

let handler = function( e ){
    this.UpdateShowMore(i);
    e.currentTarget.removeEventListener(e.type, handler);
}.bind( this );
this.showMoreLinks[i].addEventListener( "click", handler );

从MDN：


  bind（）方法创建一个新函数，该新函数在被调用时将其关键字设置为提供的值，并在调用新函数时提供给定的参数序列。


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

因此，在将处理程序定义为function handler(){}之后，使用bind将返回与handler不同的具有预设参数的匿名函数，该匿名函数随后将用作事件侦听器。您要取消监听此返回的函数，而不是原始函数，因此需要将绑定结果存储在变量中，以备后用。

关于javascript - 无法使EventListener仅触发一次JavaScript，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49669371/