2014-06-14 24 views
0

所以我想改变我的一些JavaScript的的JavaScript捕获的事件侦听器和MutationObserver

从这个

content.forumobserver = content.build.forumobserver = function() { 
    var target = document.querySelector('#content-padding'); 
    var observer = new MutationObserver(function (mutations) { 
     mutations.forEach(function(mutation, idx, mutated) { 
      if(mutation.addedNodes.length === 21) { 
       for(var i = 0; i < mutation.addedNodes.length; i++) { 
        if(mutation.addedNodes[i].id === 'post_container') { 
         // update 
         content.c_page = document.querySelector('.page_current'); 
         content.t_url = content.c_page.href; 
         content.t_page = content.t_url.replace(content.regex.url, '$3'); 
         // reload 
         content.init(options); 
         // page is loaded 
         observer.disconnect(); 
        }; 
       }; 
      }; 
     }); 
    }); 
    $.each(document.querySelectorAll('.yui3-pjax'), function(idx, pjax) { 
     pjax.addEventListener('click', function() { 
      observer.observe(target, { 
       childList: true 
      }); 
     }); 
    }); 
}; 

对此

content.forumobserver = content.build.forumobserver = function() { 
    var target = document.querySelector('#content-padding'); 
    var observer = new MutationObserver(function (mutations) { 
     mutations.forEach(function(mutation, idx, mutated) { 
      if(mutation.addedNodes.length === 21) { 
       for(var i = 0; i < mutation.addedNodes.length; i++) { 
        if(mutation.addedNodes[i].id === 'post_container') { 
         // update 
         content.c_page = document.querySelector('.page_current'); 
         content.t_url = content.c_page.href; 
         content.t_page = content.t_url.replace(content.regex.url, '$3'); 
         // reload 
         content.init(prefs); 
         // page is loaded 
         observer.disconnect(); 
        }; 
       }; 
      }; 
     }); 
    }); 
    document.body.addEventListener('click', function(evt) { 
     if(evt.target.classList.contains('yui3-pjax')) { 
      observer.observe(target, { 
       childList: true 
      }); 
     }; 
    }, true); 
}; 

唯一的问题是,后者这两个观察者在达到我想要的位置时不会断开连接。我在content.init()函数中调用content.forumobserver()。我知道这是不是说断开添加多个事件侦听器的身体,而不是原因,是因为如果我添加一个if语句来检查的初始值,然后调用content.forumobserver(),并设置中的内容初始化为true。 init()函数的MutationObserver仍然重新将所有的内容,但随后其他页面加载加入被加倍,1,2,4,8,等等上的内容。

那么,怎样才能让我的MutationObserver断开捕获的事件,而不必显式绑定点击事件到YUI3-pjax锚的内容加载后?

回答

1

使用解决了这个问题,

content.forumobserver = content.build.forumobserver = function(evt) { 
    if(evt.target.classList.contains('yui3-pjax') || evt.target.parentNode.classList.contains('yui3-pjax')) { 
     var target = document.querySelector('#content-padding'); 
     var observer = new MutationObserver(function (mutations) { 
      mutations.forEach(function(mutation, idx, mutated) { 
       if(mutation.addedNodes.length === 21) { 
        for(var i = 0; i < mutation.addedNodes.length; i++) { 
         if(mutation.addedNodes[i].id === 'post_container') { 
          // update 
          content.c_page = document.querySelector('.page_current'); 
          content.t_url = content.c_page.href; 
          content.t_page = content.t_url.replace(content.regex.url, '$3'); 
          // reload 
          content.init(options); 
          // page is loaded 
          observer.disconnect(); 
         }; 
        }; 
       }; 
      }); 
     }); 
     observer.observe(target, { 
      childList: true 
     }); 
    }; 
}; 

document.body.addEventListener('click', content.forumobserver, true);