jQuery Girl
  1. jQuery Girl
  3. Comportement du déplacement de la souris des événements JQuery dans IE
Intereting Posts
jquery attr (“onClick”) – ie et ff Evénements non affichés à partir de la firebase database dans le calendrier complet JQuery: Plugin FullCalendar: les événements ne sont pas affichés en vue semaine et par jour, mais en mois grouper les cases à cocher et permettre de cocher un maximum de trois dans chaque groupe jQuery bascule plusieurs classes Portée variable dans un object Javascript J’ai besoin de terminer la ligne du tableau en div Les contrôles de formulaire asp.net sont illisibles dans une boîte de dialog jQuery, comment y remédier? Plusieurs événements de balayage sur un élément avec TouchSwipe Rails 3.1 link_to remote => true rend HTML au lieu de JS, le même code fonctionne dans certains cas Comment désactiver le comportement par défaut d’une ancre dans jQuery Mobile (iOS) Comment append du contenu HTML extrait d’un tableau HTML? Lecture de données JSON avec jQuery Si le bloc de code Javascript n’est pas à la fin du fichier HTML, mais utilise le $ (document) .ready de jQuery (function () {…}), cela ralentira-t-il l’affichage de la page? jQuery désactive tous les boutons d’une classe css

Comportement du déplacement de la souris des événements JQuery dans IE

 
$(document).ready(function(){ $('#outer').mouseenter(function(){ console.log("mouse enter"); }); $('#outer').mousemove(function(){ console.log("mouse move"); }); }); 
 
 this is test

Lorsque la souris est entrée dans div. Dans firefox, un événement chrome mouseenter est déclenché en premier lieu par un déplacement de souris au cas où un événement IE mousemove serait déclenché en premier lieu par mouseenter. Est-ce que c’est un bug? ou existe-t-il un autre moyen permettant à tous les navigateurs de se comporter de la même manière

[Réponse mise à jour]

Il y a deux façons de contourner ce problème.

1) liez uniquement votre événement mousemove à l’événement mousenter afin que tous les événements suivants se déclenchent correctement dans le même ordre. Cela implique beaucoup de liaison et de déliaison. 

 $(document).ready(function(){ var outer_mousemove = function(){ console.log('mousemove') }; $("#outer").hover(function(){ console.log('mouseenter'); // Attach the event listener only after // Mouse enter has fired $(this).mousemove( outer_mousemove ); }, function(){ $(this).unbind('mousemove', outer_mousemove ); }); });

2) Stockez une variable et n’exécutez les événements mousemove que lorsque les conditions correspondent. Beaucoup moins contraignant / déliant de cette façon (c’est ce que je ferais si c’était mon projet): 

 $(document).ready(function(){ var outer_mousemove = false; $("#outer").hover(function(){ console.log('mouseenter'); outer_mousemove = true; }, function(){ console.log('mouseleave'); outer_mousemove = false; }).mousemove(function(){ if( outer_mousemove ){ console.log('mousemove'); } }); });

[Réponse originale]

mouseenter est un événement spécial créé par jQuery, c’est pourquoi il peut se déclencher après mousemove . Ce que vous voulez probablement, c’est un mouseover : 

 $(document).ready(function(){ $('#outer').mouseover(function(){ console.log("mouse over"); }).mousemove(function(){ console.log("mouse move"); }); });

En outre, pour éviter de recevoir plusieurs événements de survol de la souris à partir d’éléments enfants, vous pouvez effectuer un test pour vous assurer que vous n’agissez que sur les événements générés par votre object: 

 $(document).ready(function(){ $('#outer').mouseover(function(e){ if(e.target == this){ console.log("mouse over"); } }).mousemove(function(){ console.log("mouse move"); }); });

Enfin, dans ma réponse, j’ai utilisé la chaîne (ie ‘mouseover (). Mousemove ()’) au lieu d’appeler le sélecteur $("#outer") deux fois. Cela rend juste votre page un peu plus rapide 🙂