在元素外部设置html点击处理程序点击后立即触发

代码中的问题是,当您点击图标时,日历图标点击事件和正文点击事件都会被触发。

看见 https://api.jquery.com/event.stopPropagation/

在一个元素上触发的事件传播到其父元素。 在您的情况下,图标单击事件会立即传播到主体元素。

您可以停止日历图标事件的传播:

function fire(event) {
  console.log("fire");
  // Stop the event from spreading
  event.stopPropagation();

  // Listen to clicks on the body
  $("body").on("click", function () {
    console.log("clicked outside");
    // Remove the listener after it has been triggered
    $("body").off("click");
  });
}

然后,修改HTML以将事件对象传递给fire()函数:

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

日历图标上的点击事件不会传播到主体,只有在日历图标外部点击时才会触发主体上的点击活动!