attachEvent и addEvent оказывают неожиданный результат
Наверное, я допустил какую-то любительскую ошибку, которую продолжаю упускать из виду, но я не могу понять это.
Я делаю одностраничный сайт с плавной прокруткой. Если вы прокручиваете, браузер определяет направление, а затем прокручивает вас до нужного 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 как номер страницы. Когда я прокручиваю назад вверх, он остается на последней странице, и на консоли также отображается номер 6 как pageNumber. Это правильно, если pageNumber на самом деле будет 6, но оно должно быть соответственно 1 и 5. Консоль действительно показывает правильные значения для переменной y, которая используется для добавления attachEvents, поэтому я немного не в курсе.