Question

我有三个不同的事件监听器，一个用于打开灯箱，一个用于关闭灯箱，另一个用于添加以后的功能。

因此，在单击关闭按钮后，不再存在任何eventListeners。基本代码示例：

var a ={
   open_lightbox:function(ele){
      ele.addEventListener('click',function(){
          //code that creates dynamic html and so forth.
      },false); 
    }, 
   close_lightbox:function(){
      var closer = a.get('.lightbox_close')[0];
      closer.addEventListener('click',function(){
        var p = this.parentNode.parentNode.parentNode;
        p.parentNode.removeChild(p);
      },false);
    },
   watch_later:function(ele){
        ele.addEventListener('click',function(){
           //uses localStorage to save data and then adds parameters
        },false);
    },
   get:function(ele){ return document.querySelectorAll(ele); }
 };

  var lightbox = a.get('.lightbox_button'),i;
  for(i=0;i<lightbox.length;i++){
     a.open_lightbox(lightbox[i]);
   }

现在，当我点击主要事件open_lightbox时，我无法重新打开灯箱，也无法点击watch_later元素。所有原始的eventListener都被删除了，是因为假use capture？尽管我愿意，我还没有尝试将false更改为true。我只需要解释为什么会发生这种情况，因为这是我多年来第一次遇到这个问题。

复制问题的测试：

http://jsfiddle.net/ES5h2/

我做了更多的测试，并不是点击关闭按钮，而是在第一次点击元素后打开灯箱。

Answer 1

我会尝试不删除该元素，但要隐藏它

你可以使用

p.style.display = "none";

而不是

p.parentNode.removeChild(p);

Answer 2

我不是百分之百确定为什么这会取消每个事件的事件监听器，尽管我确实找到了更加语义的方式。这只是做...

document.addEventListener('click',function(e){
      if(/lightbox_btn/gi.test(e.target.className)){
        //perform the code
      }
},false);

所以我真的把它拿来并将事件Listener添加到文档而不是元素本身。现在工作正常

为什么在删除父子进程后删除了eventListener

2 个答案: