jquery : code d'implémentation pour l'annulation et la liaison de l'événement de survol

L'éditeur suivant vous apportera un code d'implémentation pour annuler et lier l'événement hover dans jquery. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil

Dans la conception Web, nous utilisons souvent jquery pour répondre aux événements de survol de la souris, qui ont le même effet que les événements mouseover et mouseout, mais comment utiliser bind pour les lier. la méthode du survol ? Comment utiliser la dissociation pour dissocier un événement ?

1. Comment lier l'événement de survol

Supposons que nous lions un événement de clic et de survol au a. tag :

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

Lorsque l'on clique sur la balise a, quelque chose d'étrange se produit. L'événement de survol lié ne répond pas du tout, mais l'événement de clic lié répond normalement.

Mais si vous modifiez la méthode d'écriture, par exemple :

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

Ce code peut s'exécuter normalement. Vous ne pouvez pas lier le survol de liaison ?

En fait non, vous devriez plutôt utiliser les deux événements mouseenter et mouseleave (c'est aussi l'événement utilisé dans la fonction .hover() ), pour pouvoir le faire directement comme this Citation  :

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

Parce que .hover() est un événement défini par jQuery lui-même, c'est juste pour la commodité des utilisateurs de lier et d'appeler les événements mouseenter et mouseleave. ce n'est pas un événement réel, donc bien sûr, il ne peut pas être considéré comme appelé avec les paramètres d'événement dans .bind().

2. Comment annuler l'événement de survol

Comme nous le savons tous, vous pouvez utiliser la fonction de dissociation pour annuler les événements liés, mais vous ne pouvez annuler que les événements liés par bind. L'événement de survol dans jquery est assez spécial. Si l'événement est lié de cette manière, il ne peut pas être annulé.

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

La bonne façon d'annuler l'événement de survol lié :

$('a').unbind('mouseenter').unbind('mouseleave');

Résumé

En fait, vous pouvez vous référer à la documentation officielle de jquery pour ces problèmes, mais peu de gens l'ont lu la plupart des tutoriels sur Internet expliquent uniquement comment utiliser cette méthode, et n'atteignent que l'objectif, sans une compréhension approfondie. de pourquoi. Écrire comme ça ?

Si vous avez des questions, n'hésitez pas à laisser un commentaire.

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!