Heim >Web-Frontend >Front-End-Fragen und Antworten >So löschen Sie ein Hover-Ereignis in JQuery

So löschen Sie ein Hover-Ereignis in JQuery

青灯夜游
青灯夜游Original
2022-12-16 17:13:222531Durchsuche

In jquery können Sie die Methode unbind() verwenden, um das Hover-Ereignis zu löschen. Sie können die Anweisung „unbind(„hover“)“ jedoch nicht direkt verwenden, da Hover aus MouseEnter und Mouseleave besteht, um den Hover-Effekt zu löschen , Sie müssen nur verschieben Mit Ausnahme dieser beiden Ereignisse lautet die Syntax „element object.unbind(„mouseenter“).unbind(„mouseleave“)“.

So löschen Sie ein Hover-Ereignis in JQuery

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

Heute bin ich auf das Problem gestoßen, dass JQuery den Hover entfernen muss. Ich dachte, ich könnte es direkt lösen unbind("hover"), aber es hat lange gedauert, es zu beheben, aber es hat immer noch nicht funktioniert.

$("button").click(function() {
	$("p").unbind("hover");
});

So löschen Sie ein Hover-Ereignis in JQuery

Der Grund ist eigentlich ganz einfach: Schweben ist kein Ereignis. Öffnen Sie das Referenzhandbuch. Hover besteht tatsächlich aus MouseEnter und MouseLeave. Das macht das Problem sehr deutlich!

/* 这种方法是错误的 */
$(#hover_div).unbind("hover");

/* 这种方法也是错误的 */
$(#hover_div).unbind("mouseover").unbind("mouseout");

/* 这种方法是新增的,在老的版本里是无法使用的 */
$(#hover_div).unbind("mouseenter mouseleave");

/* 这种方法正确的,新老版本皆可用 */
$(#hover_div).unbind("mouseenter").unbind("mouseleave");

Der obige Code empfiehlt die Verwendung der vierten Methode, die relativ sicherer ist.

Verwendungsbeispiel:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").hover(function() {
					$("p").css("background-color", "yellow");
				}, function() {
					$("p").css("background-color", "pink");
				});

				$("button").click(function() {
					$("p").unbind("mouseenter").unbind("mouseleave");
				});
			});
		</script>
	</head>
	<body>

		<p>鼠标移动到该段落。</p>
		<button>删除hover</button>
	</body>
</html>

So löschen Sie ein Hover-Ereignis in JQuery

Beschreibung: unbind()-Methode

unbind()-Methode kann alle oder ausgewählte Ereignishandler entfernen oder die Ausführung der angegebenen Funktion beenden, wenn ein Ereignis auftritt.

Diese Methode kann auch Event-Handler über das Event-Objekt entbinden. Diese Methode wird auch verwendet, um Ereignisse in sich selbst zu entbinden (z. B. das Löschen des Ereignishandlers, nachdem das Ereignis eine bestimmte Anzahl von Malen ausgelöst wurde).

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video

Das obige ist der detaillierte Inhalt vonSo löschen Sie ein Hover-Ereignis in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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