Question

我正在编写一个使用socket.io的程序。在这个特定的部分，我发送请求并处理答案。

客户端：

// ....
socket.emit('opendrow', a.id);
socket.on('opendrowresponse', function(msg) {

console.log(msg);
cell.innerHTML = msg;
// ....

服务器端手柄：

// ....
socket.on('opendrow',function(msg) {
    console.log(msg);
    connection2.query('SELECT * FROM testpreis WHERE id = '+msg, function(err,rows,fields) {
    if (err) throw err;
         io.to(socket.id).emit('opendrowresponse',rows)
    });
});
// ....

客户端代码在点击功能中：

var plusrow = document.getElementsByClassName('plusrow');
for (var i = 0;i<plusrow.length;i++) {
plusrow[i].addEventListener('click', collapse);
}

collapse函数基本上扩展了一个表，发送请求并在创建的表行中插入响应。

我在第一次点击“plusrow”时收到此回复：

Array [ Object ]

这是预期的回应。

但是，如果我点击另一个表行，我会得到两个具有相同内容的结果集

Array [ Object ]
Array [ Object ]

并且对于每次连续点击，我得到一个对象数组，尽管只需要一个数组 响应是正确的，所以如果我请求例如。 id 50，id 50有两个响应，50个有三个响应，具体取决于我之前点击的次数。

我检查了服务器端控制台并执行了所请求ID的console.log：

socket.on('opendrow',function(msg) {
    console.log(msg);

并且对此的响应是预期的只有一个id，例如

我不认为崩溃功能的其余部分与它有关，但在这里它是：

function collapse() {
var table = document.getElementById('pricingtable');
var a = this;
var aclassName = a.className.replace(' openchild','');
console.log(a.className);

console.log(a.className.indexOf('openchild'));


if (a.className.indexOf('openchild') >= 0) {
var childtodel = document.getElementById(a.id+'sub');
console.log(childtodel.rowIndex);
table.deleteRow(childtodel.rowIndex);
a.className = aclassName;
}
else {

document.getElementById(a.id).className += ' openchild';
console.log (a.id);
console.log(a.parentNode.rowIndex);

var element =  table.insertRow(a.parentNode.rowIndex + 1);
element.id = a.id+'sub';
//element.innerHTML = 'sdfalkj';
var cell = element.insertCell(0);
cell.colSpan = 8;
socket.emit('opendrow', a.id);
socket.on('opendrowresponse', function(msg) {

console.log(msg);
cell.innerHTML = msg;

});

}

}

有人可以解释为什么不仅有一个响应，而是每次点击连续更多？

我应该改变什么？

Answer 1

事件委托可以帮助您避免这种混乱。基本上，您将事件侦听器添加到父对象，并在事件冒泡时响应事件。

http://davidwalsh.name/event-delegate

我无法识别导致该行为的代码中的确切位置，但我的直觉告诉我它是附加事件侦听器的for循环。 For循环是意外++行为的常见罪魁祸首。

socket.io给出了两个响应，但只有一个被响应

1 个答案: