Question

我正在尝试创建一个仅触发一次的链接，以便我可以将其更改为另一个EventListener。当我按“显示更多”时，我希望删除当前的EventListener，因为现在它只是继续触发其他“显示更多 - ”链接，因为我正在使用数组的解决方案。

这是我正在使用的函数，但我不觉得它会触发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

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

Answer 1

对此最好的解决方案是在事件上设置一个标志，使列表器成为准时列表器。

请将您的JavaScript代码更新为：

this.showMoreLinks[i].addEventListener("click", function handler(e) { 
    this.UpdateShowMore(i);     
}.bind(this), {once : true});

您不必编写任何removeEventListner（）。

Answer 2

我认为你的绑定函数实际上与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（）方法创建一个新函数，在调用时，将其this关键字设置为提供的值，并在调用新函数时提供任何前面提供的给定参数序列。

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

因此，在将处理程序定义为function handler(){}之后，使用bind将返回与handler不同的匿名函数，并带有预设参数，然后将其用作事件侦听器。你想要取消这个返回的函数，而不是原始函数，所以你需要将bind的结果存储在一个变量中供以后使用。

无法使EventListener只触发一次JavaScript

2 个答案: