JavaScript绑定事件在特定时间

JavaScript Bind Event at Certain Time

本文关键字：定时间 事件 绑定 JavaScript      更新时间：2023-09-26

我试图实现以下功能，我有一些麻烦。我想要的是，当用户单击某个图像，一个弹出式div将出现包含有关该图像的一些信息。然后，如果用户要单击该弹出式div之外的页面上的任何地方，它将简单地隐藏然后删除弹出式。

我要做的是注册一个eventListener后弹出的div被添加到页面。尝试与jquery和没有和我之后的相同问题。(我在下面包括了两个，但一次只有一个在代码中是活动的。)

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

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

我想你的问题是事件传播。您的图像用作打开弹出窗口的触发器，将您的事件从整个DOM向上扩展，最终扩展到主体。因此，淡出/移除事件与打开事件同时触发。

您需要以这样的方式(使用:

)停止该内容的传播。
$('#popup_trigger').on('click', function(event){
  event.stopPropagation();
  $('.profile_pop_up').fadeIn();
});
相关文章：