为什么jquery的"on"方法会在赋值后立即触发其目标函数？

Question

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

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

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

所需的结果是closePopup仅在myButton单击后分配给正文.但是,当点击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);
});
...