當第二次註冊時的javascript事件偵聽器不起作用

我有兩個js函數，如下面的函數nexPage工作正常，但previousPage函數調用事件時webkitAnimationEnd不按預期工作。鏈接的jsfiddle：link to jsfiddle 當第二次註冊時的javascript事件偵聽器不起作用

var currentPage = 0; 
    function nextPage() 
    { 
     alert(currentPage); 
     var pages = document.getElementsByClassName('pages'); 
     pages[currentPage].className = "pages pageanim"; 
     pages[currentPage].addEventListener('webkitAnimationEnd', function(){ 
     this.style.left  = '0%'; 
     this.style.zIndex = currentPage; 
     currentPage = currentPage+1; 
    }, false); 

} 

    function previousPage() 
    { 
     //alert(currentPage); 
     var pages = document.getElementsByClassName('pages pageanim'); 
     pages[0].className = "pages revpageanim"; 

     pages[0].addEventListener('webkitAnimationEnd', function(){ 
     this.style.left  = '49%'; 
     this.style.zIndex = currentPage+1; 
     currentPage = currentPage-1; 
    }, false); 
    }

這裏是我的html

<body onLoad="applyZindex();"> 
    <!-- Add your site or application content here --> 
    <header><button class="nav left" onClick="previousPage();">&lt;&lt;prev</button> 
<h3 class="left">Previewer (TM) 
</h3><button class="nav right" onClick="nextPage();"> 
next>></button></header> 
      <section style=" position:relative;"> 
      <img src="img/1.jpg" alt="page1" title="page1" class="pages" /> 
      <img src="img/2.jpg" alt="page2" title="page2" class="pages" /> 
      <img src="img/3.jpg" alt="page1" title="page1" class="pages" /> 
      <img src="img/4.jpg" alt="page2" title="page2" class="pages" /> 
      </section> 
      <footer></footer> 
     </body>

來源

2012-10-03 Arun Killu

你能http://jsfiddle.net/這個更換？ –

我現在不能使用它，你能告訴我爲什麼當我打電話頁面時，nextPage的previousPage函數事件列表程序中的.addEventListener正在工作。 –

我應該粘貼我的HTML和CSS太？ –

http://jsfiddle.net/K8Tuy/28/在這裏你去;

因此，如果您每次點擊時還需要addEventListener，則需要每次點擊時都需要removeEventListener; 一般來說，在每次點擊後它不是一個好主意addEventListener。它應該初始化一次，你的邏輯應該在按鈕內。

var currentPage = 0; 
    function nextPage() 
    { 
     var pages = document.getElementsByClassName('pages'); 
     pages[currentPage].className = "pages pageanim"; 
     pages[currentPage].addEventListener('webkitAnimationEnd', function(){ 
      this.style.left  = '0%'; 
      this.style.zIndex = currentPage; 
      pages[currentPage].className = "pages"; 
      currentPage = currentPage+1; 
      this.removeEventListener('webkitAnimationEnd',arguments.callee,false); 
      console.log(currentPage); 
     }, false); 

} 

    function previousPage() 
    { 
     //alert(currentPage); 
     var pages = document.getElementsByClassName('pages'); 
     page = pages[currentPage-1]; 
     page.className = "pages revpageanim"; 

     page.addEventListener('webkitAnimationEnd', function(){ 
      currentPage = currentPage-1; 
      this.style.left  = '49%'; 
      page.style.zIndex = pages.length-currentPage; 
      page.className = "pages"; 
      this.removeEventListener('webkitAnimationEnd',arguments.callee,false); 
      console.log(currentPage); 
     }, false); 
    }

編輯：
http://jsfiddle.net/K8Tuy/35/ - arguments.callee與「功能名」

來源

2012-10-03 05:45:09 ted

this.removeEventListener（「webkitAnimationEnd」，arguments.callee的，虛假的）;沒有在我的browser.i工作TNK它在嚴格模式dosent工作 –

請點擊這裏http://jsfiddle.net/K8Tuy/24/ –

'callee' doesn; t在嚴格模式下工作 – ted

當第二次註冊時的javascript事件偵聽器不起作用

回答

相關問題