[英]Unable to make EventListener trigger only once 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
也许这甚至不是最聪明的选择,所以其他任何代码建议也都适用。
最好的解决方案是在事件上设置一个标志,以使列表器成为准时列表器。
请将您的JavaScript代码更新为:
this.showMoreLinks[i].addEventListener("click", function handler(e) {
this.UpdateShowMore(i);
}.bind(this), {once : true});
您不必编写任何removeEventListner()。
我不认为您的绑定函数实际上与您对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
匿名函数,该匿名函数随后将用作事件侦听器。 您想取消监听此返回的函数,而不是原始函数,因此需要将绑定结果存储在变量中,以备后用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.