attachEvent和addEvent呈现意外结果

时间:2014-02-01 17:25:34

标签: javascript jquery html addeventlistener attachevent

我想我一定是犯了一些业余的错误,我一直在忽视,但我似乎无法弄明白。

我正在制作一个平滑滚动的网站。如果滚动,浏览器会检测方向,然后滚动到相应的div。但是,当我滚动时,每次都会传递不正确的页面编号。

这是相关的javacript代码:

var mousewheelevt;
var wheeldirection;
var wheeldirectiontype;
function ScrollToPage(pageNumber, directionNumber, directionNumberType) {
    console.log('pageNumber: ' + pageNumber);
    var direction;
    var newPageNumber;
    var directionType; //0=up, 1=down
    console.log('directionNumberType: ' + directionNumberType);
    console.log('directionNumber: ' + directionNumber);
    if (directionNumberType == 0){
        //non ff
        if (directionNumber > 0) {
            directionType = 0; //up
        } else {
            directionType = 1; //down
        }
    } else {
        //ff
        if (directionNumber < 0) {
            directionType = 0; //up
        } else {
            directionType = 1; //down
        }
    }
    console.log('directionType: ' + directionType);
    console.log('pageNumber: ' + pageNumber);
    if (directionType == 0) {
        direction = 'up';
        if(pageNumber > 1) {
            newPageNumber = pageNumber - 1;
        } else {
            newPageNumber = 1
        }
    } else {
        direction = 'down';
        if(pageNumber < 5) {
            newPageNumber = pageNumber + 1;
        } else {
            newPageNumber = 5;
        }
    }
    $.scrollTo( $('#Page_' + newPageNumber), 800);
    console.log(direction + ' - ' + newPageNumber);
}
$(document).ready(function() {
    var y;
    if(/Firefox/i.test(navigator.userAgent)) {
        mousewheelevt = "DOMMouseScroll";
        wheeldirectiontype = 1;
    } else {
        mousewheelevt = "mousewheel";   //FF doesn't recognize mousewheel as of FF3.x  
        wheeldirectiontype = 0;
    }   
    for (y = 1; y <= 5; y++) {
        console.log(y);
        if (document.attachEvent) {//if IE (and Opera depending on user setting)  
            if(wheeldirectiontype == 0) {
                document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, w.wheelDelta, wheeldirectiontype)});
            } else {
            document.getElementById('Page_' + y).attachEvent("on"+mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)});
            }
        } else if (document.addEventListener) {//WC3 browsers  
            if(wheeldirectiontype == 0) {
                document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.wheelDelta, wheeldirectiontype)}, false); 
            } else {
                document.getElementById('Page_' + y).addEventListener(mousewheelevt, function(e){ScrollToPage(y, e.detail, wheeldirectiontype)}, false);
            }
        }
        console.log(y);
        $("#Page_" + y).wipetouch({
            wipeUp: function(result) {ScrollToPage(y,1,0);},
            wipeDown: function(result) {ScrollToPage(y,0,0);}
        });
    }
});

这是html:

<body>
<div id="Page_1" class="Landscape">
            Ankerrui 2
</div>
<div id="Page_2" class="Landscape">
            Voorwoord
</div>
<div id="Page_3" class="Landscape">
            Beschrijving
</div>
<div id="Page_4" class="Landscape">
            In de buurt
</div>
<div id="Page_5" class="Landscape">
            Foto's
</div>
</body>

页面正好在第一页上加载,当我向下滚动时,它会滚动到底部页面,控制台显示6作为pageNumber。当我向上滚动时,它会停留在最后一页,控制台也会显示6作为pageNumber。如果pageNumber实际上是6,这是正确的,但它应分别为1和5。 控制台确实显示了用于添加attachEvents的y变量的正确值,所以我在这里有点无能为力。

0 个答案:

没有答案