Heim > Artikel > Web-Frontend > js onmousewheel-Ereignis wurde mehrfach ausgelöst. Problemlösung_Javascript-Fähigkeiten

js onmousewheel-Ereignis wurde mehrfach ausgelöst. Problemlösung_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 16:33:241323Durchsuche

Ich wollte einen reibungslosen Wechseleffekt erzielen, indem ich das Mausrad zwischen dem ersten und dem zweiten Bildschirm drehte. Später war ich mit der Hilfe von kk sehr zufrieden Ich habe es aufgenommen. Ein Klick:

Mein ursprünglicher Code sah so aus:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
div {
width: 700px;
height: 1000px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
<div class="yellow"> </div>
<div class="red"> </div>
</body>

<script src="../jQuery/jquery.min.js"></script>
<script src="test.js"></script>
</html>

$(document).ready(function(){
var height = $(window).height(); //获取浏览器窗口当前可见区域的大小
　　　　//鼠标滚动之后整屏切换
var scrollFunc = function(e){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){ //不同浏览器向下滚动 
$(document.body).animate({scrollTop:height}, "fast");
$(document.documentElement).animate({scrollTop:height}, "fast");
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){ //不同浏览器向上滚动
$(document.body).animate({scrollTop:0}, "fast");
$(document.documentElement).animate({scrollTop:0}, "fast");
}
};
　　　　//注册事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel = document.onmousewheel = scrollFunc; //IE、chrome、safira
});

Ich habe diesen Code normalerweise unter IE und Firefox getestet, aber unter Google wird das Onmousewheel-Ereignis immer mehrmals ausgelöst. Das ist äußerst ärgerlich. Warum wird es mehrmals ausgelöst? Nach dem Debuggen habe ich festgestellt, dass wir jedes Mal, wenn wir mit der Maus scrollen, sehr „brutal“ um einen großen Betrag auf einmal scrollen, anstatt langsam in kleinen Quadraten zu scrollen, was dazu führt, dass beim Scrollen das onmousewheel-Ereignis mehrmals ausgelöst und scrollFunc aufgerufen wird Wenn die Animationsfunktion in der Funktion nicht ausgeführt wurde, wird sie weiterhin aufgerufen. Auf diese Weise kann die Bildlaufleiste nach mehrmaligem Scrollen nicht nach unten gescrollt werden. Also habe ich den obigen js-Code wie folgt geändert:

$(document).ready(function(){
var height = $(window).height();
var scrollFunc = function(e){
document.onmousewheel = undefined;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height){ 
$(document.body).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:height}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
$(document.body).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
$(document.documentElement).animate({scrollTop:0}, "fast","linear",function(){
document.onmousewheel = scrollFunc;
});
}
};
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
document.onmousewheel = scrollFunc;
});

Okay, jetzt kann der Code normal ausgeführt werden, aber da ich ein Neuling bin, ist der Code nicht ausreichend verfeinert, und kk hat es noch einmal gesagt. Auf seine Aufforderung hin habe ich den redundanten Code aktualisiert:

$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var body;
if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("MSIE")>0){
body = document.documentElement;
}else{
body = document.body;
}
var isFinish = true;
var scrollFunc = function(e){
if(isFinish){
var scrollTop = body.scrollTop;
e = e || window.event;
if((e.wheelDelta<0|| e.detail>0) && scrollTop>=0 && scrollTop<height-20){ 
scroll(height);
}else if((e.wheelDelta>0 || e.detail<0) && scrollTop>=height && scrollTop<=height+20){
scroll(0);
}
}

};
var scroll = function(height){
isFinish = false;
$(body).animate({scrollTop:height},"fast","linear",function(){
isFinish = true;
});
};
if(navigator.userAgent.indexOf("Firefox")>0){
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
}else{
document.onmousewheel = scrollFunc;
}
});

Ich habe endlich den Code für die Einführung bekommen. Ich muss sagen, dass ich durch die Lösung dieses Problems viel gelernt habe. Ich werde in Zukunft noch stärker auf das Ziel „Weniger schreiben, mehr tun“ hinarbeiten! ! !

Wenn an dem, was ich geschrieben habe, etwas nicht stimmt, können Sie mir gerne einen Rat geben, ich werde unvoreingenommen daraus lernen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erste Schritte mit der JavaScript-SUP-Methode (Anzeigen von Zeichenfolgen als hochgestellte Zeichen)_GrundkenntnisseNächster Artikel：Erste Schritte mit der JavaScript-SUP-Methode (Anzeigen von Zeichenfolgen als hochgestellte Zeichen)_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen