点击日历图标后，绑定的body点击事件为何立即触发？

为什么绑定的body点击事件会立即触发？ #

这是DOM事件冒泡导致的：

• 点击图标时，先执行图标上的onclick='fire()'，输出"fire"；
• 点击事件不会停在图标元素，会沿着DOM树向上冒泡，最终传递到body元素；
• 你在fire函数中给body绑定了新的click事件处理器，此时冒泡过来的点击事件正好触发了这个刚绑定的处理器，所以立刻输出"clicked outside"。

修复方案 #

方法1：阻止图标点击事件的冒泡

修改图标点击的传参，并在fire函数中阻止事件向上冒泡：

<img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' width='100px' onclick='fire(event)' />

<script>
function fire(event) {
  console.log('fire');
  // 阻止事件冒泡到body，避免触发刚绑定的body点击事件
  event.stopPropagation();

  $('body').on('click', (e) => {
    console.log('clicked outside');
    $('body').off('click');
  });
}
</script>

方法2：针对弹窗场景的完善方案（如果你后续会添加日历弹窗）

如果已经有日历弹窗元素（假设弹窗id为calendar-popup），可以在body的点击处理器中判断点击目标是否属于弹窗内部，避免误关闭：

function fire(event) {
  console.log('fire');
  event.stopPropagation();
  // 假设这里是显示弹窗的逻辑，比如：$('#calendar-popup').show();

  $('body').on('click', (e) => {
    const popup = $('#calendar-popup');
    // 判断点击目标不是弹窗本身，也不是弹窗的子元素
    if (!popup.is(e.target) && popup.has(e.target).length === 0) {
      console.log('clicked outside popup');
      popup.hide();
      $('body').off('click');
    }
  });
}

内容的提问来源于stack exchange，提问作者Dan