jQueryでホバーイベントをキャンセルする方法

ホバー イベントをキャンセルするための Jquery メソッド: 1. クリックとホバー イベントを a タグにバインドします; 2. "$('a').unbind('mouseenter').unbind('mouseleave'』を使用します) ;" メソッドは、バインドされたホバー イベントをキャンセルできます。

この記事の動作環境: Windows7 システム、jquery バージョン 3.2.1、DELL G3 コンピューター

キャンセル方法jquery を使用した hover イベント?

jquery で hover イベントをキャンセルしてバインドする正しい方法

Web デザインでは、マウス ホバーに応答するために jquery を使用することがよくあります。 events、mouseover、mouseout イベントには同じ効果がありますが、bind を使用して hover メソッドをバインドするにはどうすればよいでしょうか? unbind を使用してイベントのバインドを解除するにはどうすればよいですか?

1. ホバー イベントをバインドする方法

まず、次のコードを見てください。クリックとホバー イベントを a タグにバインドするとします。

a タグをクリックすると、バインドされた hover イベントはまったく応答しませんが、バインドされたクリック イベントは正常に応答します。

しかし、書き込み方法を変更すると、たとえば:

$(document).ready(function(){ $('a').bind({ hover: function(e) { //
Hover event handler alert("hover"); }, click: function(e) { // Click
event handler alert("click"); } }); });

このコードは正常に実行できます。

実際には、いいえ、mouseenter と Mouseleave の 2 つのイベントを代わりに使用する必要があります (これは .hover() 関数で使用されるイベントでもあります)

したがって、次のように直接引用できます。 :

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

.hover() は jQuery 自体によって定義されたイベントであるため、ユーザーがマウスエンター イベントとマウスリーブ イベントをバインドして呼び出すのに便利なだけであり、実際のイベントではないため、当然のことながら実行できません.bind() のイベント パラメータとして使用して呼び出すことができます。

2. ホバー イベントをキャンセルする方法

ご存知のとおり、バインドされたイベントをキャンセルするには unbind 関数を使用できますが、キャンセルできるのはバインドされたイベントのみです。 jquery の hover イベントは非常に特殊で、この方法でイベントがバインドされている場合、キャンセルすることはできません。

$(document).ready(function(){ $('a').bind({ mouseenter: function(e) { //
Hover event handler alert("mouseover"); }, mouseleave: function(e) { //
Hover event handler alert("mouseout"); }, click: function(e) { // Click
event handler alert("click"); } }); });

バインドされたホバー イベントをキャンセルする正しい方法:

$("a").hover(function(){ alert('mouseover'); }, function(){
alert('mouseout'); })

3. 概要

実際、これらの問題については、以下を参照してください。公式の jquery 命令ドキュメントですが、読んだ人はほとんどいません。インターネット上のほとんどのチュートリアルは、このメソッドの使用方法を説明し、目的を達成することだけを説明しています。なぜこのように書かれているのかについては深く理解されていません。

推奨学習: 「

jquery ビデオ チュートリアル 」

以上がjQueryでホバーイベントをキャンセルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。