Question

我有两个js函数，如下面给出的函数nexPage工作正常但是当调用事件webkitAnimationEnd时，previousPage函数不能正常工作。链接到jsfiddle：link to jsfiddle

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>

Answer 1

http://jsfiddle.net/K8Tuy/28/你走了;

因此，如果每次点击都removeEventListener，则每次点击都需要addEventListener; 通常，每次点击都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替换为“函数名称”

注册时第二次javascript事件监听器不起作用

1 个答案: