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

Question

在单击另一个元素后，我正在尝试为单击主体分配一个功能。这是我正在使用的代码：

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

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

期望的结果是仅在单击 myButton 之后才将 closePopup 分配给正文。但是当点击 myButton 时会立即触发 closePopup。为什么会这样？

Answer 1

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

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

但是请注意，如果您多次单击该按钮，这将导致绑定多个事件。您可以通过更多修改来修复它：

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