Javascript 如何重新启用单击事件？

我想在单击矩形时禁用它的onclick事件，但如何在第二次单击时再次启用它

我想我需要使用矩形的onclick属性，但是每次都有null值

const svgViewport=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，150）
.attr（“高度”，150）；
让myData=[
[{
x:30，
y:40
},
{
x:30，
y:60
}
],
[{
x:60，
y:40
},
{
x:60，
y:60
}
],
[{
x:90，
y:40
},
{
x:90，
y:60
}
],
[{
x:120，
y:40
},
{
x:120，
y:60
}
]
];
让按钮=[{
x:40，
y:100
},
{
x:70，
y:100
},
{
x:100，
y:100
}
];
const groups=svgViewport.selectAll（空）
.数据（myData）
.输入（）
.附加（“g”）；
常量圆=组。选择全部（空）
.数据（d=>d）
.输入（）
.附加（“圆圈”）
.attr（“cx”，（d）=>d.x）
.attr（“cy”，（d）=>d.y）
.attr（“r”，10）；
const button=svgViewport.selectAll（“g”）
.数据（按钮）
.append（“rect”）
.attr（“x”，（d）=>d.x）
.attr（“y”，（d）=>d.y）
.attr（“类”、“btn”）
.attr（“id”，（d，i）=>“a”+i）
.attr（“光标”、“指针”）
.attr（“宽度”，10）
.attr（“高度”，10）
.attr（“填充”、“红色”）
.on（“点击”，（d，i）=>{
设el=document.getElementsByClassName（“btn”）[i].id；
log（“您单击了id为=“+el”的按钮）；
svgViewport.selectAll（“#”+el.）。在（“单击”，空）；
});
起初你的问题很不清楚，但我相信你已经解释了你想要什么：

我想要一个不同的功能，为每偶数和奇数点击

在这种情况下，您不需要附加/分离事件处理程序（这使您的问题成为经典问题）。相反，让我们创建一个计数器，并根据计数器的奇数或偶数运行不同的函数

为此，我们将创建一个

首先，在回调中立即调用侦听器函数：

button.on("click", clickButtons());

这对于创建闭包很重要，因为与仅引用函数不同

button.on("click", clickButtons);

…，这是最常见的方法，通过调用侦听器函数并获取其返回值，我们将返回另一个函数（见下文）

现在是侦听器函数：

function clickButtons() {
  let counter = 0;
  return function(d, i, n) {
    if (++counter % 2) {
      console.log("You clicked on a button with id " + n[i].id)
    } else {
      console.log("click skipped!")
    }
  }
}

return function(d, i, n) {
//arguments-----^--^--^

这就是它所做的：

首先，它声明一个
计数器
，设置为
0
。此
计数器可在内部函数中访问，实际返回。因此，
selection.on
传递的三个参数由该内部函数捕获：

function clickButtons() {
  let counter = 0;
  return function(d, i, n) {
    if (++counter % 2) {
      console.log("You clicked on a button with id " + n[i].id)
    } else {
      console.log("click skipped!")
    }
  }
}

return function(d, i, n) {
//arguments-----^--^--^

这些参数（数据、索引和组）是在函数中执行任何操作的基础

然后是重要的部分：在每次单击时，增加
计数器
，并测试它除以2的余数，它只返回两个值，
1
（truthy）和
0
（falsy）：

下面是演示：只有每隔单击红色按钮时，才会显示元素的ID：


const svgViewport=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，150）
.attr（“高度”，150）；
让myData=[
[{
x:30，
y:40
},
{
x:30，
y:60
}
],
[{
x:60，
y:40
},
{
x:60，
y:60
}
],
[{
x:90，
y:40
},
{
x:90，
y:60
}
],
[{
x:120，
y:40
},
{
x:120，
y:60
}
]
];
让按钮=[{
x:40，
y:100
},
{
x:70，
y:100
},
{
x:100，
y:100
}
];
const groups=svgViewport.selectAll（空）
.数据（myData）
.输入（）
.附加（“g”）；
常量圆=组。选择全部（空）
.数据（d=>d）
.输入（）
.附加（“圆圈”）
.attr（“cx”，（d）=>d.x）
.attr（“cy”，（d）=>d.y）
.attr（“r”，10）；
const button=svgViewport.selectAll（“g”）
.数据（按钮）
.append（“rect”）
.attr（“x”，（d）=>d.x）
.attr（“y”，（d）=>d.y）
.attr（“类”、“btn”）
.attr（“id”，（d，i）=>“a”+i）
.attr（“光标”、“指针”）
.attr（“宽度”，10）
.attr（“高度”，10）
.attr（“填充”、“红色”）
。在（“单击”，单击按钮（））；
函数clickButtons（）{
设计数器=0；
返回函数（d，i，n）{
如果（++计数器%2）{
log（“您单击了id为“+n[i].id”的按钮）
}否则{
log（“单击跳过！”）
}
}
}
。作为控制台包装{最大高度：30%！重要；}
“我想在单击矩形时禁用它的onclick事件，但如何在第二次单击时再次启用它”。。。我并没有这样做：单击矩形，事件函数工作，然后侦听器被禁用。然后，当您再次单击它时，监听器将重新启用，事件函数将正常工作。。。因此，它一直在工作！请更好地解释它。它适用于前两次单击，例如，当我单击id为a0的矩形时，它将运行console.log（“您单击id为=“+el”的按钮），第二次单击它将运行var kl=svgViewport.selectAll（“#”+el）。在（“单击”，null）上，第三次、第四次单击它将再次运行varkl=svgViewport.selectAll（“#”+el）.on（“click”，null），但我想在第三次单击时再次运行此代码：console.log（“您单击了id为=“+el”的按钮），因此我希望每次偶数和奇数单击都有不同的功能