特定时间的JavaScript绑定事件

我正在尝试实现以下功能，但遇到了一些问题。我想要的是，当用户单击某个图像时，将出现一个弹出div，其中包含有关该图像的一些信息。然后，如果用户要单击该弹出div之外的页面上的任何位置，它将简单地隐藏并删除弹出窗口

我试图做的是在将弹出div添加到页面后注册eventListener。在同一问题之后，使用jquery和without以及am进行了尝试。（我在下面列出了这两个，但一次代码中只有一个处于活动状态。）

---

似乎正在发生的事情是，在初次单击时立即触发事件以显示弹出窗口，因此它永远不会显示。如何创建一个eventListener，它只在特定时间开始侦听这些单击？

我想您的问题在于事件传播。作为打开弹出窗口的触发器的图像会在整个DOM中弹出事件，最终到达主体。因此，淡出/删除事件与打开事件同时触发

您需要以这种方式停止传播（使用：

---

我的猜测是，实际上你的问题是，你的函数似乎被命名为相同的东西，所以第二个覆盖了第一个。

    createProfilePopUpEventListener: function(){
        $('body').on('click', function(){
           $('.profile_pop_up').fadeOut('fast').remove();
        });
    },

    createProfilePopUpEventListener: function(){
        var el = document.getElementsByTagName('body')[0];
        el.addEventListener("click", $('.profile_pop_up').fadeOut('fast').remove();
    },

    showPopUp: function(e){
         //creates popUp and adds it to the DOM
         this.createProfilePopUpEventListener();
    }

$('#popup_trigger').on('click', function(event){
  event.stopPropagation();
  $('.profile_pop_up').fadeIn();
});