如何阻止eventListener被多次调用？已添加监听器重复触发求解

方法1：用jQuery的one()替代on() #

jQuery专门提供了one()方法，它会绑定一个仅执行一次的事件处理器，事件触发后会自动解绑，完美解决多次调用的问题。直接替换你的代码即可：

this.elements.one('done', function (event) {
  console.log(event);
});

方法2：手动在回调内解绑事件 #

如果因为业务需求必须用on()绑定，可以在回调函数执行后，手动移除这个事件监听器。注意要把回调函数单独提取出来，方便后续解绑：

// 单独定义回调函数
const handleDone = function(event) {
  console.log(event);
  // 解绑当前的'done'事件处理器
  this.elements.off('done', handleDone);
}.bind(this); // 绑定this上下文，避免指向错误

// 绑定事件
this.elements.on('done', handleDone);

补充说明 #

你的代码之所以会多次触发，大概率是因为绑定事件的代码被执行了多次，导致同一个元素上绑定了多个相同的事件回调。上面两种方法都能确保回调只执行一次，按需选择就行。

内容的提问来源于stack exchange，提问作者Asna Khan