Question

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

我要做的是在将popUp div添加到页面后注册eventListener。尝试了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？

Answer 1

我猜你的问题是事件传播。用作打开弹出窗口的触发器的图像会将整个DOM中的事件冒泡到最终的身体。因此，淡出/移除事件与您的开放事件同时触发。

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

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

JavaScript绑定事件在某个时间

1 个答案: