addEventListener "remembers"该人多次点击按钮，然后在注册一次后注册两次！如何解决？

Question

我正在使用socket.io并编写一个webRTC应用程序。到目前为止，我所拥有的是每个用户单击"连接"按钮，它会将他们与另一个也单击了"连接"的用户连接起来。现在，由于用户通过视频通话，连接按钮被禁用。现在，一旦其中一个用户单击断开连接，"连接"按钮将再次可用，因此它不再被禁用。但是，如果用户现在点击连接，它会通过两次功能。它注册了两次，因为它不知怎么记得用户之前点击过一次连接。但我认为，既然它之前已经注册过一次，它应该没事，只注册一次。但是没有！所以在这一点上什么都不起作用。一旦用户单击断开连接，然后再次连接，然后连接寄存器三次。等等。(我在chrome中使用调试器，我可以看到它通过断点的次数)。

如何使addeventlistener函数不记得以前的所有单击？(流是媒体流)

function justdoit(stream)
{
document.getElementById("connect").addEventListener("click",    function(e)
{ 
document.getElementById("disconnect").disabled = false;
document.getElementById("connect").disabled = true;
socket.on("quit", function(quit)  
{
justdoit(stream);
});         

document.getElementById("disconnect").addEventListener("click", function(e)
{
justdoit(stream);
});
});
}
justdoit(stream);

我没有包括所有的代码，只是我认为相关的代码。很明显，我写的代码比这多得多，但我认为这与我写的码有关。

Answer 1

您正在添加事件侦听器，但从未删除它们。尽管如此，尝试避免完全调用justdoit的递归模式可能会更干净，相反，您可以像下面的一样重新考虑代码

(function init(stream) {
// define functions
// var connect = document.getElementById('connect'); // you can cache these
function click_connect(e) {
document.getElementById('connect').disabled = true;
document.getElementById('disconnect').disabled = false;
// other connect actions
}
function click_disconnect(e) {
document.getElementById('disconnect').disabled = true;
document.getElementById('connect').disabled = false;
// other disconnect actions
}
// set up
document.getElementById('connect').addEventListener('click', click_connect);
document.getElementById('disconnect').addEventListener('click', click_disconnect);
}(stream));

我遗漏了您的socket.on("quit", ..，因为我不确定您是否需要重新注册(即在click_connect或click_disconnect中进行)，或者您是否只需要进行一次(在// set up区域中进行)

---

如果您只想知道如何删除事件侦听器，可以使用target.removeEventListener(type, handler_reference)，即

var fn = function (e) {},
elem = document.getElementById('foo');
elem.addEventListener('click', fn);
elem.removeEventListener('click', fn); // same handler ref as addEventListener