javascript - 为什么jquery的 “on”方法在赋值后立即触发其目标函数？

我试图在单击另一个元素后在主体上分配一个函数。这是我正在使用的代码:

$('#myButton').click(function() {
  $('body').on('click', closePopup);
});

closePopup = function() {
    console.log('closePopup fired');
    $('body').off('click', closePopup);
};

理想的结果是，仅在myButton单击之后，将closePopup分配给主体。但是发生的是，单击myButton时立即触发closePopup。为什么会这样呢？

最佳答案

发生这种情况是因为事件冒泡。事件处理程序完成按钮上的事件处理后，它会冒泡到达主体，然后由主体进行处理。为防止这种情况，请在按钮单击时停止传播事件。

$('#myButton').click(function(e) {
  e.stopPropagation();
  $('body').on('click', closePopup);
});
...

但是请注意，如果多次单击按钮，将导致绑定(bind)多个事件。您可以通过对其进行更多修改来修复它:

$('#myButton').click(function(e) {
  e.stopPropagation();
  $('body').off('click', closePopup).on('click', closePopup);
});
...