ホームページ >ウェブフロントエンド >jsチュートリアル >js onmousewheelイベントが複数回トリガーされる問題解決_javascriptスキル
js onmousewheelイベントが複数回トリガーされる問題解決_javascriptスキル
- WBOYオリジナル
- 2016-05-16 16:33:241346ブラウズ
最初の画面と 2 番目の画面の間でマウス ホイールを回転させることでスムーズな切り替え効果を実現したかったのですが、その後、kk の助けで問題を解決できました。ワンクリックで録音しました:
私の最初のコードは次のようになりました:
<!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
});
このコードは IE と Firefox で通常どおりテストしましたが、Google では onmousewheel イベントが常に複数回トリガーされます。これはなぜ複数回トリガーされるのでしょうか。デバッグ後、マウスをスクロールするたびに、小さな正方形でゆっくりスクロールするのではなく、一度に非常に「残酷に」大量にスクロールすることがわかりました。これにより、スクロール時に onmousewheel イベントがトリガーされ、scrollFunc が複数回呼び出されます。このように、関数内のanimate関数が実行されていない状態でも、何度もスクロールしても下にスクロールできず、ページが上にスクロールできない状況が発生します。そこで、上記の js コードを次のように変更しました:
$(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;
});
これで、コードは正常に実行できるようになりましたが、私は初心者なので、コードが十分に洗練されていません。そして、kk のプロンプトに従って、冗長なコードをいくつか更新しました。
$(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;
}
});
ようやく導入用のコードを入手できました。この問題を解決することで多くのことを学べたと言わざるを得ません。今後も「書く量を減らし、量を増やす」を目標に頑張ります！ ！ ！
私の書いたことに何か間違っていることがあれば、遠慮せずにアドバイスをいただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。