Comment lier et annuler des événements de survol dans jQuery (code ci-joint)

Cet article explique principalement comment utiliser bind pour lier la méthode de survol et comment utiliser unbind pour annuler l'événement lié. Si vous en avez besoin, vous pouvez y jeter un œ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 lier la méthode de survol ? Comment utiliser la dissociation pour dissocier un événement ?

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

Regardez d'abord le code suivant Supposons que nous lions un événement de clic et de survol à la balise a :

$(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, telle que :

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

, ce code peut s'exécuter normalement. Impossible de lier le survol de liaison ?

En fait non, il faudrait utiliser à la place les deux événements mouseenter et mouseleave (c'est aussi l'événement utilisé dans la fonction .hover()), donc on peut le citer directement comme ceci :

$(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 appelé comme. un paramètre 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. 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, ceux-ci problèmes Vous pouvez vous référer à la documentation officielle de jquery, 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. Il n'y a pas de compréhension approfondie de la raison pour laquelle elle est écrite de cette façon. ? Si vous avez des questions, veuillez 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!