Javascript 删除单击事件问题

我显然做错了什么，但无法向自己解释

目标是监听单击事件（首先开始）。如果用户单击“开始”，则第二个单击侦听器应准备就绪，但只有在单击特定元素时才会触发。如果第二次单击发生在外部，则应再次删除第二次单击事件侦听器

听起来很简单，但我的问题如下：

单击“开始”时，

document.body.addEventListener（'click'

我怎样才能完成我所解释的

var Blubb=函数（元素）{
this.element=元素；
document.addEventListener（'make-ready'，this.makeblubready.bind（this），false）；
};
Blubb.prototype.makeBlubReady=函数（）{
var options={1:true，2:false}；
this.element.classList.remove（'disabled'）；
this.element.addEventListener（'click'，（function（）{this.go（options）}）.bind（this），false）；
document.body.addEventListener(
“点击”，
（功能（事件）{
log（'在单击“开始”之前不应该准备好它）；
if（event.target==this.element）{
返回；
}
this.element.removeEventListener（'单击'，this.go）
}).绑定（此），
假的
);
};
Blubb.prototype.go=函数（选项）{
log（'Blubb go，options.one:'，options.one）；
};
document.querySelector（'.first'）.addEventListener（'click'，function（）{
新的Blubb（document.querySelector（“.second”）；
document.dispatchEvent（新CustomEvent（'make-ready'，{}））；
}，false）

.second.disabled{
显示：无；
}

开始


BLUBB

您的代码的问题是，您正在使用

bind

将类的引用绑定到侦听器，但是

bind

会在每次使用时创建侦听器的新引用。因此，您以后将无法删除侦听器。要解决此问题，您必须将侦听器引用保存到变量f中或者以后使用。此外，您还可以将侦听器绑定到文档，因此它会立即执行。为了防止这种情况，您可以将绑定包装到

setTimeout

中，或者将

useCapture

选项设置为

true

你也应该考虑让你的类成为单独的一个或者破坏前一个实例，因为多个实例会因为文档上的侦听器而相互影响。

下面是一个使用上述技术的类的示例：

var Blubb=（函数（doc）{
var默认值={
一:对,，
二:假
},
disabledClass='disabled'，
实例=null；
函数Blubb（元素、选项）{
如果（实例）{
instance.destroy（）；
};
this.element=元素；
this.options=Object.assign（{}，默认值，选项）；
this.element.classList.remove（disabledClass）；
this.removeListener=setupListener.call（this）；
实例=此；
}
函数setupListener（）{
var listener=onClick.bind（this）；
doc.addEventListener（'click'，listener，true）；
返回函数（）{
文档removeEventListener（'click'，listener，true）；
}
}
函数onClick（事件）{
if（event.target==this.element）{
this.go（this.options）；
}否则{
这个。销毁（）；
}
}
Blubb.prototype.go=函数（选项）{
log（'Blubb go，选项：'，选项）；
}
Blubb.prototype.destroy=函数（）{
this.element.classList.add（disabledClass）；
this.element=null；
实例=null；
这个.removeListener（）；
}
返回Blubb；
})（文件）；
//设置
document.querySelector（'.first'）.addEventListener（'click'，function（）{
新的Blubb（document.querySelector（“.second”）；
}，false）

.second.disabled{
显示：无；
}
.首先，
.第二{
背景：#eee；
光标：指针；
}

开始


BLUBB

读了你问题的标题后，我感到很害怕：/@void谢谢你的评论，更改了标题以减少恐惧：）我想你点击开始=>你传递第一个事件监听器，在文档上设置一个，然后事件冒泡，并触发您刚刚为第一次分析设置的文档单击处理程序。我可以说，您正在为每次单击文档绑定事件。尝试更改绑定事件的位置。感谢您的解释。但我不想相信setTimeout是唯一的选项。没错，您还可以将侦听器配置为将

useCapture

设置为

true

。我编辑了这个片段。