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);
});
...

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

1 个答案: