javascript - 使用 Vanilla js 删除或禁用表行的 onclick 监听器

Question

我正在使用 vanilla js 动态地向表中添加行，如下所示:

// insert new row
var row = table.insertRow()
// add click listener to row
row.onclick = (function rowClickListener(){
     // delete row on click
    table.deleteRow(row.rowIndex)
})

但是当另一个函数正在运行时，我想在该函数的持续时间内禁用 onclick 功能(这样用户就不能在处理过程中删除表项)。我试过失败:

row.disabled = true
// and
row.removeEventListener('click', rowClickListener)

我的尝试是否可行？

Answer 1

您当前的函数 rowClickListener 是一个函数表达式，而不是一个函数声明，因此没有 rowClickListener 变量获取在外部范围内创建。您需要引用函数变量才能removeEventListener。

此外，为了removeEventListener，您需要通过addEventListener 添加该函数:

function rowClickListener(){
  table.deleteRow(row.rowIndex)
}
row.addEventListener('click', rowClickListener);
// later...
row.removeEventListener('click', rowClickListener);

如果你想走 onclick 路线，那么你可以通过将 null 分配给它来删除监听器:

row.onclick = () => table.deleteRow(row.rowIndex);
// later...
row.onclick = null;