So brechen Sie ein Hover-Ereignis in JQuery ab

jQuery ist eine sehr beliebte JavaScript-Bibliothek. Sie bietet viele praktische Funktionen und Methoden, mit denen Entwickler schnell und einfach JavaScript-Code schreiben und interaktive Effekte zu Webseiten hinzufügen können. Unter anderem wird die Methode hover() zum Binden von Mauseintritts- und -ausgangsereignissen verwendet. Manchmal müssen wir jedoch das Hover-Ereignis abbrechen, nachdem eine bestimmte Bedingung ausgelöst wurde. In diesem Artikel wird erläutert, wie jQuery das Hover-Ereignis abbricht.

Werfen wir zunächst einen Blick auf die Syntax der hover()-Methode:

$(selector).hover(handlerIn, handlerOut)

Darunter ist selector der Elementselektor, an den das Ereignis gebunden ist, handlerIn ist die Funktion, die ausgeführt werden soll, wenn die Maus das Element betritt. und handlerOut ist, wenn die Maus das Element verlässt Die auszuführende Funktion.

Wenn wir das Hover-Ereignis abbrechen möchten, können wir die von jQuery bereitgestellte Methode off() verwenden. Die Methode off() wird verwendet, um einen oder mehrere Event-Handler aus einem Element zu entfernen.

Die Syntax lautet wie folgt:

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

• event: erforderlich, Angabe des zu löschenden Ereignistyps, mehrere durch Leerzeichen getrennte Ereignistypen;
• childSel: optional, Angabe des untergeordneten Elements des Elements, nur Löschereignisverarbeitung aktiviert das angegebene untergeordnete Element Prozedur;
• handler: Optional, stellt den spezifischen Handler für das zu entfernende Ereignis dar. Wenn es weggelassen wird, werden alle Ereignisse gelöscht.

Wenn wir also das Hover-Ereignis freigeben möchten, müssen wir nur den folgenden Code verwenden:

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

Unter diesen entsprechen Mouseenter und Mouseleave den Mauseintritts- bzw. -ausstiegsereignissen.

Es ist zu beachten, dass alle Event-Handler gelöscht werden, wenn das Ereignis mit der Methode off() verworfen wird. Wenn Sie nur einen Event-Handler entfernen möchten, können Sie den dritten Parameter der off()-Methode verwenden, um den spezifischen Event-Handler anzugeben, der gelöscht werden soll.

Angenommen, wir haben den folgenden HTML-Code:

<div>鼠标悬停会出现提示</div>

Wir möchten, dass ein Eingabeaufforderungsfeld angezeigt wird, wenn sich die Maus über dem Element befindet. Das Eingabeaufforderungsfeld muss jedoch unter bestimmten Bedingungen abgebrochen werden (z. B. wenn andere Schaltflächen aktiviert sind). angeklickt werden), können Sie den folgenden Code verwenden:

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

Im obigen Code binden wir zuerst das Hover-Ereignis. Wenn die Maus hineingeht, wird das Eingabeaufforderungsfeld angezeigt, und wenn die Maus es verlässt, wird das Eingabeaufforderungsfeld ausgeblendet . Wenn dann auf eine andere Schaltfläche geklickt wird, verwerfen wir das Hover-Ereignis, sodass der Benutzer den Tooltip nicht mehr sehen kann.

Zusammenfassend lässt sich sagen, dass es sehr einfach ist, jQuery zum Abbrechen des Hover-Ereignisses zu verwenden. Sie müssen lediglich die Methode off() verwenden und den Ereignistyp angeben, der abgebrochen werden soll. Wenn wir einen bestimmten Event-Handler entfernen müssen, können wir natürlich auch den dritten Parameter verwenden, der von der Methode off() bereitgestellt wird.

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