Web-Frontend
js-Tutorial
js onmousewheel-Ereignis wurde mehrfach ausgelöst. Problemlösung_Javascript-Fähigkeiten
js onmousewheel-Ereignis wurde mehrfach ausgelöst. Problemlösung_Javascript-Fähigkeiten
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.
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
![Ereignis-ID 4660: Objekt gelöscht [Fix]](https://img.php.cn/upload/article/000/887/227/168834320512143.png?x-oss-process=image/resize,m_fill,h_207,w_330)
Ereignis-ID 4660: Objekt gelöscht [Fix]
Jul 03, 2023 am 08:13 AM
Einige unserer Leser sind auf das Ereignis ID4660 gestoßen. Sie sind sich oft nicht sicher, was sie tun sollen, deshalb erklären wir es in diesem Leitfaden. Die Ereignis-ID 4660 wird normalerweise protokolliert, wenn ein Objekt gelöscht wird. Daher werden wir auch einige praktische Möglichkeiten zur Behebung des Problems auf Ihrem Computer untersuchen. Was ist Ereignis-ID4660? Die Ereignis-ID 4660 bezieht sich auf Objekte in Active Directory und wird durch einen der folgenden Faktoren ausgelöst: Objektlöschung – Ein Sicherheitsereignis mit der Ereignis-ID 4660 wird protokolliert, wenn ein Objekt aus Active Directory gelöscht wird. Manuelle Änderungen – Die Ereignis-ID 4660 kann generiert werden, wenn ein Benutzer oder Administrator die Berechtigungen eines Objekts manuell ändert. Dies kann passieren, wenn Sie Berechtigungseinstellungen ändern, Zugriffsebenen ändern oder Personen oder Gruppen hinzufügen oder entfernen
Erhalten Sie bevorstehende Kalenderereignisse auf Ihrem iPhone-Sperrbildschirm
Dec 01, 2023 pm 02:21 PM
Auf iPhones mit iOS 16 oder höher können Sie bevorstehende Kalenderereignisse direkt auf dem Sperrbildschirm anzeigen. Lesen Sie weiter, um herauszufinden, wie es geht. Aufgrund von Komplikationen auf dem Zifferblatt sind viele Apple Watch-Benutzer daran gewöhnt, einen Blick auf ihr Handgelenk werfen zu können, um das nächste bevorstehende Kalenderereignis zu sehen. Mit der Einführung von iOS 16 und Sperrbildschirm-Widgets können Sie dieselben Kalenderereignisinformationen direkt auf Ihrem iPhone anzeigen, ohne das Gerät überhaupt entsperren zu müssen. Das Widget „Kalender-Sperrbildschirm“ gibt es in zwei Varianten, sodass Sie die Zeit des nächsten bevorstehenden Ereignisses verfolgen oder ein größeres Widget verwenden können, das den Namen des Ereignisses und seine Zeit anzeigt. Um mit dem Hinzufügen von Widgets zu beginnen, entsperren Sie Ihr iPhone mit Face ID oder Touch ID und halten Sie es gedrückt
Was ist in JavaScript der Zweck des „oninput'-Ereignisses?
Aug 26, 2023 pm 03:17 PM
Wenn dem Eingabefeld ein Wert hinzugefügt wird, tritt das oninput-Ereignis auf. Sie können versuchen, den folgenden Code auszuführen, um zu verstehen, wie Oninput-Ereignisse in JavaScript implementiert werden – Beispiel<!DOCTYPEhtml><html> <body> <p>Writebelow:</p> <inputtype="text"
Wie implementiert man Kalenderfunktionen und Ereigniserinnerungen in PHP-Projekten?
Nov 02, 2023 pm 12:48 PM
Wie implementiert man Kalenderfunktionen und Ereigniserinnerungen in PHP-Projekten? Kalenderfunktionen und Terminerinnerungen gehören zu den häufigsten Anforderungen bei der Entwicklung von Webanwendungen. Ob persönliche Terminverwaltung, Teamzusammenarbeit oder Online-Veranstaltungsplanung – die Kalenderfunktion ermöglicht eine bequeme Zeitverwaltung und Transaktionsplanung. Die Implementierung von Kalenderfunktionen und Ereigniserinnerungen in PHP-Projekten kann durch die folgenden Schritte abgeschlossen werden. Datenbankdesign Zunächst müssen Sie eine Datenbanktabelle entwerfen, um Informationen zu Kalenderereignissen zu speichern. Ein einfaches Design könnte die folgenden Felder enthalten: id: eindeutig für das Ereignis
So implementieren Sie die Änderungsereignisbindung ausgewählter Elemente in jQuery
Feb 23, 2024 pm 01:12 PM
jQuery ist eine beliebte JavaScript-Bibliothek, die zur Vereinfachung der DOM-Manipulation, Ereignisbehandlung, Animationseffekte usw. verwendet werden kann. Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen wir die Ereignisbindung für ausgewählte Elemente ändern müssen. In diesem Artikel wird erläutert, wie Sie mit jQuery ausgewählte Elementänderungsereignisse binden, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir ein Dropdown-Menü mit Optionen erstellen, die Beschriftungen verwenden:
Detaillierte Erläuterung der Eingabefeld-Bindungsereignisse in Vue-Dokumenten
Jun 21, 2023 am 08:12 AM
Vue.js ist ein leichtes JavaScript-Framework, das einfach zu verwenden, effizient und flexibel ist. Es ist derzeit eines der beliebtesten Front-End-Frameworks. In Vue.js sind Eingabefeld-Bindungsereignisse eine sehr häufige Anforderung. In diesem Artikel werden die Eingabefeld-Bindungsereignisse im Vue-Dokument ausführlich vorgestellt. 1. Grundkonzepte In Vue.js bezieht sich das Eingabefeld-Bindungsereignis auf die Bindung des Werts des Eingabefelds an das Datenobjekt der Vue-Instanz, wodurch eine bidirektionale Bindung von Eingabe und Antwort erreicht wird. In Vue.j
Was sind die am häufigsten verwendeten Ereignisse in jquery?
Jan 03, 2023 pm 06:13 PM
Häufig verwendete Ereignisse in jquery sind: 1. Fensterereignisse 2. Mausereignisse, bei denen es sich um Ereignisse handelt, die generiert werden, wenn der Benutzer das Dokument bewegt oder darauf klickt, einschließlich Mausklicks, Einzugsereignisse, Auszugsereignisse usw.; 3. Tastaturereignisse: Ereignisse werden jedes Mal generiert, wenn der Benutzer eine Taste auf der Tastatur drückt oder loslässt, einschließlich Tastendruckereignissen, Tastenfreigabeereignissen usw. 4. Formularereignisse, z. B. wenn ein Element den Fokus erhält, wird der Fokus () angezeigt. Das Ereignis wird ausgelöst, und wenn es den Fokus verliert, wird das Ereignis „blur()“ ausgelöst, und das Ereignis „submit()“ wird ausgelöst, wenn das Formular gesendet wird.
Ein tiefer Einblick in Close-Button-Ereignisse in jQuery
Feb 24, 2024 pm 05:09 PM
Vertiefendes Verständnis des Schließen-Schaltflächenereignisses in jQuery Während des Front-End-Entwicklungsprozesses stoßen wir häufig auf Situationen, in denen wir die Schließschaltflächenfunktion implementieren müssen, z. B. das Schließen von Popup-Fenstern, das Schließen von Eingabeaufforderungsfeldern usw. Wenn Sie jQuery, eine beliebte JavaScript-Bibliothek, verwenden, wird es äußerst einfach und bequem, das Schaltflächenereignis „Schließen“ zu implementieren. Dieser Artikel befasst sich mit der Verwendung von jQuery zum Implementieren von Schließschaltflächenereignissen und stellt spezifische Codebeispiele bereit, um den Lesern zu helfen, diese Technologie besser zu verstehen und zu beherrschen. Zuerst müssen wir verstehen, wie man definiert
