jqueryでホバーイベントを削除する方法-フロントエンドQ&A-php.cn

jqueryでホバーイベントを削除する方法

青灯夜游

リリース： 2022-12-16 17:13:22

オリジナル

2499 人が閲覧しました

jquery では、unbind() メソッドを使用して hover イベントを削除できますが、hover はマウスエンターとマウスリーブで構成されているため、「unbind("hover")」ステートメントを直接使用することはできません。ホバー効果を削除する必要があります。これら 2 つのイベントを削除するだけでよく、構文は「element object.unbind("mouseenter").unbind("mouseleave")」です。

jqueryでホバーイベントを削除する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

今日、jQuery でホバーを削除する必要があるという問題に遭遇しました。unbind("hover") だけで解決できると思いましたが、解決するまでに長い時間がかかりました。機能しませんでした。

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

ログイン後にコピー

jqueryでホバーイベントを削除する方法

理由は実は非常に単純で、ホバーはイベントではないからです。リファレンスマニュアルを開くと、hoverは実際にはmouseenterとmouseleaveで構成されています。これにより、問題が非常に明確になります。

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

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

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

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

ログイン後にコピー

上記のコードでは、比較的安全な 4 番目の方法を使用することを推奨しています。

使用例:

<!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>

ログイン後にコピー

jqueryでホバーイベントを削除する方法