Maison  >  Article  >  interface Web  >  La souris de l'événement jquery mousemove glisse sur l'image

La souris de l'événement jquery mousemove glisse sur l'image

黄舟
黄舟original
2017-06-28 10:23:001346parcourir

Problèmes à résoudre : Lorsque la souris est garée sur la image, les informations pertinentes de l'image actuelle,

mon premier sentiment est d'utiliser la souris event : mousemove peut déclencher l'événement d'affichage correspondant lorsqu'il reste sur l'image, et déclencher l'événement caché lorsque mouseout quitte

Cependant, à la fin, il a été constaté que : l'information sera être affiché lorsque la souris reste sur l'image. Elle continue de trembler. Après avoir vérifié les informations pertinentes, j'ai trouvé que l'explication du manuel sur l'événement de survol de la souris est :

Remarque : lorsque l'utilisateur déplace la souris. pixel, un événement mousemove se produira. La gestion de tous les événements mousemove consomme des ressources système. Veuillez utiliser cet événement avec prudence.

En d'autres termes : notre souris déclenchera un événement d'affichage même s'il y a une gigue d'un pixel, pas étonnant que cela provoque la ressource d'informations sur l'image

Solution La solution est : utilisez le survol. Le manuel officiel explique cette méthode :

est une méthode qui imite un événement de survol (la souris se déplace vers un objet et en sort. objet). Il s'agit d'une méthode personnalisée qui fournit un état « conserver » pour les tâches fréquemment utilisées.

Lorsque la souris passe sur un élément correspondant, la première fonction spécifiée sera déclenchée. Lorsque la souris quitte cet élément, la deuxième fonction spécifiée sera déclenchée. De plus, cela s'accompagnera d'une détection si la souris est toujours dans un élément spécifique (par exemple, une image dans p). Si c'est le cas, elle continuera à rester dans l'état "survol" sans déclencher l'événement de déplacement (). modification Correction d'une erreur courante) lors de l'utilisation de l'événement mouseout.

Exemple de code :

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn