Comment annuler un événement de survol dans jquery

jQuery est une bibliothèque JavaScript très populaire. Elle fournit de nombreuses fonctions et méthodes pratiques, permettant aux développeurs d'écrire rapidement et facilement du code JavaScript et d'ajouter des effets interactifs aux pages Web. Parmi eux, la méthode hover() est utilisée pour lier les événements d'entrée et de sortie de la souris, mais nous devons parfois annuler l'événement de survol après qu'une certaine condition soit déclenchée. Cet article présentera comment jQuery annule l'événement de survol.

Tout d'abord, jetons un œil à la syntaxe de la méthode hover() :

$(selector).hover(handlerIn, handlerOut)

Parmi elles, selector est le sélecteur d'élément auquel l'événement est lié, handlerIn est la fonction à exécuter lorsque la souris entre dans l'élément, et handlerOut est le moment où la souris quitte l'élément La fonction à exécuter.

Si nous voulons annuler l'événement de survol, nous pouvons utiliser la méthode off() fournie par jQuery. La méthode off() est utilisée pour supprimer un ou plusieurs gestionnaires d'événements d'un élément.

La syntaxe est la suivante :

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

• event : obligatoire, indiquant le type d'événement à supprimer, plusieurs types d'événements séparés par des espaces ;
• childSel : facultatif, indiquant l'élément enfant de l'élément, supprime uniquement le traitement des événements sur l'élément enfant donné Procédure ;
• handler : facultatif, représentant le gestionnaire spécifique de l'événement à supprimer. En cas d'omission, tous les événements sont supprimés.

Donc, si nous voulons libérer l'événement hover, il suffit d'utiliser le code suivant :

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

Parmi eux, mouseenter et mouseleave correspondent respectivement aux événements d'entrée et de sortie de la souris.

Il convient de noter que si l'événement est ignoré à l'aide de la méthode off(), tous les gestionnaires d'événements seront supprimés. Si vous souhaitez uniquement supprimer un certain gestionnaire d'événements, vous pouvez utiliser le troisième paramètre de la méthode off() pour spécifier le gestionnaire d'événements spécifique à supprimer.

Par exemple, supposons que nous ayons le code HTML suivant :

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

Nous souhaitons qu'une boîte de dialogue s'affiche lorsque la souris survole l'élément, mais la boîte de dialogue doit être annulée dans certaines conditions (par exemple lorsque d'autres boutons sont cliqués), vous pouvez utiliser le code suivant :

$(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');
  });
});

Dans le code ci-dessus, nous lions d'abord l'événement de survol lorsque la souris entre, la boîte d'invite apparaîtra, et lorsque la souris quitte, la boîte d'invite sera masquée. . Ensuite, lorsqu'un autre bouton est cliqué, nous rejetons l'événement de survol afin que l'utilisateur ne puisse plus voir l'info-bulle.

Pour résumer, il est très simple d'utiliser jQuery pour annuler l'événement de survol. Il vous suffit d'utiliser la méthode off() et de spécifier le type d'événement à annuler. Bien entendu, si nous devons supprimer un gestionnaire d’événements spécifique, nous pouvons également utiliser le troisième paramètre fourni par la méthode off().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!