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

jQuery は非常に人気のある JavaScript ライブラリです。多くの便利な関数とメソッドが提供されているため、開発者は JavaScript コードを迅速かつ簡単に作成し、Web ページにインタラクティブな効果を追加できます。このうち、hover() メソッドはマウスの出入りイベントをバインドするために使用されますが、特定の条件がトリガーされた後にホバー イベントをキャンセルする必要がある場合があります。この記事では、jQuery がホバー イベントをキャンセルする方法を紹介します。

まず、hover() メソッドの構文を見てみましょう:

$(selector).hover(handlerIn, handlerOut)

その中で、selector はイベントがバインドされる要素セレクターであり、handlerIn は関数です。 、 handlerOut は、マウスが要素に入ったときに実行される関数です。

ホバーイベントをキャンセルしたい場合は、jQuery が提供する off() メソッドを使用できます。 off() メソッドは、要素から 1 つ以上のイベント ハンドラーを削除するために使用されます。

構文は次のとおりです:

$(selector).off(event,childSel,handler)

• event: 必須、削除するイベント タイプを示し、スペースで区切られた複数のイベント タイプ;
• childSel: オプション、要素の子要素を示し、指定された子要素のイベント ハンドラーのみを削除します;
• handler: オプション、削除するイベントの特定のハンドラーを示します。省略した場合は、すべてのイベントが削除されます。

したがって、ホバーイベントをキャンセルしたい場合は、次のコードを使用するだけで済みます。

$(selector).off('mouseenter mouseleave');

このうち、mouseenter と Mouseleave は、マウスの Enter イベントと Leave イベントに対応します。それぞれ。

off() メソッドを使用してイベントをキャンセルすると、すべてのイベント ハンドラーが削除されることに注意してください。特定のイベント ハンドラーのみを削除する場合は、off() メソッドの 3 番目のパラメーターを使用して、削除する特定のイベント ハンドラーを指定できます。

たとえば、次の HTML コードがあるとします。

<div id="box">鼠标悬停会出现提示</div>

マウスを要素の上に置くと、特定の条件下 (他のボタンをクリックするなど) でプロンプト ボックスを表示したいとします。 ) プロンプト ボックスをキャンセルする必要がある場合は、次のコードを使用できます:

$(function() {
  var $box = $('#box'); // 获取元素
  $box.hover(function() {
    // 鼠标进入时弹出提示框
    $box.append('<div id="tip">提示内容</div>');
  }, function() {
    // 鼠标离开时隐藏提示框
    $box.find('#tip').remove();
  });
  
  $('#button').on('click', function() {
    // 点击按钮解除hover事件
    $box.off('mouseenter mouseleave');
  });
});

上記のコードでは、最初に hover イベントをバインドします。マウスが入力されると、プロンプト ボックスがポップアップ表示され、マウスが入力されると、プロンプト ボックスが表示されます。そのままにすると、プロンプト ボックスは非表示になります。次に、別のボタンをクリックすると、ホバー イベントが破棄され、ユーザーがツールチップを表示できなくなります。

要約すると、jQuery を使用してホバー イベントをキャンセルするのは非常に簡単で、off() メソッドを使用して、キャンセルするイベント タイプを指定するだけです。もちろん、特定のイベント ハンドラーを削除する必要がある場合は、off() メソッドによって提供される 3 番目のパラメーターを使用することもできます。

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