Pourquoi je ne peux pas capturer un événement mouseout?

J'ai besoin de savoir quand le curseur de la souris quitte un div. J'ai donc brancher le mouseout événement. Cependant, si je bouge la souris très rapidement la div, le mouseout événement ne pas le feu. C'est vrai: le curseur de la souris était rester assis à l'intérieur de la div, c'est maintenant à l'extérieur la div, et pourtant la mouseout de rappel n'a pas été appelée. (Il fonctionne très bien si je ne bouge pas la souris assez rapide.)

Cela est vrai dans le dernières versions de Google Chrome par le moyen – donc pas seulement un "vieux navigateurs" problème.

Une solution de contournement:

Une question à propos de ce problème a été posée avant. Apparemment c'est juste un fait de la vie, et la seule solution que j'ai trouvé est de surveiller manuellement mousemove événements, à chaque fois vérifier le curseur x/y de l'coordonne et de voir si elles entrent dans le div’s de la boîte englobante, de sorte que vous avez plus de chances de "préavis" si le curseur n'est plus à l'intérieur.

Au lieu de laisser le navigateur de faire tout cela en natif, effectuer des calculs sur chaque pixel se déplacer est un peu de performances. C'est aussi fastidieux de code.

À ma question...

Pourquoi ne peut pas le navigateur ne peut pas capturer l' mouseout événement? Si je peux dire de manière fiable lorsque la souris a gauche de la div à l'aide de la solution de contournement ci-dessus, pourquoi ne peut pas le navigateur le faire?

Je comprends (à partir de la réponse ci-dessus) que JavaScript n'essayez pas d'interpoler les "frames". Dire que si vous mettez un mousemove gestionnaire sur le document, et de déplacer rapidement la souris 200 pixels vers la droite dans une parfaite ligne horizontale, vous pourriez pas obtenir 200 mousemove événements. Quelques-être manqué. Je n'ai pas de problème avec ça.

Mais si certains pixels sont des mouvements de manquer tout comme la souris traverse la limite de la div, pourquoi est-ce que le mouseout événement devrait également être ignorés? Lorsque le navigateur commence enfin l'enregistrement de la position du curseur souris à nouveau (après un soudain mouvement rapide), même si la souris est maintenant miles en dehors de la boîte, le point est qu'il utilisé pour être dans la zone et n'est plus. Ainsi, pourquoi n'est-il pas alors le feu de l'événement mouseout alors?

Je ne vois pas pourquoi ce serait un problème difficile pour les fournisseurs de navigateur à résoudre. (Mais j'ai confiance il pourrait y avoir une bonne raison, que je suis trop stupide pour penser.)

Je poste cette question, surtout par curiosité, mais j'espère que la réponse pourrait donner quelques informations qui pourraient m'aider à contourner le problème plus efficacement. Aussi, les autres solutions de contournement (qui sont plus rapides que celui présenté ci-dessus) serait la bienvenue.

  • C'est d'absolument aucune aide pour vous (d'où un commentaire, plutôt qu'une réponse), mais que le comportement de la plupart semble certainement comme un bug. C'est aussi sans doute évident, mais pour répondre à votre question "pourquoi est-ce que l'événement mouseout devrait également être ignorés?", la réponse serait-il qu'elle ne l'est pas, car il est non-intentionnel du comportement.
  • Intéressant. C'est beaucoup de l'aide pour m'en fait – si vous avez raison, c'est un bug. Me semble étrange que ce genre de bug existe en Chrome 15 si! Je vais faire une page de test et de l'essayer dans d'autres navigateurs et de voir comment il est répandu. Et je pourrais soumettre un rapport de bogue crbug.com et voir ce qu'ils en font. Merci.
  • FYI: Chrome 15 n'est pas dans l'étable canal encore
  • vrai, mauvais exemple. Mais c'est aussi le cas avec google Chrome 11-14 (et probablement les versions antérieures) . Je vais voir si c'est le cas dans d'autres navigateurs (je vais devoir faire une nouvelle page de test tout d'abord, comme mon exemple est dans une extension Chrome).
  • Une solution de contournement qui le sera toujours (mais qui n'est pas le meilleur) est à l'aide de setInterval. Peu importe ce que les événements de me faire virer ou quoi bizarreries sur le navigateur, vous pouvez simplement cocher tout autant des millisecondes.
  • J'utilise jQuery fortement et écrire du code qui fait ce que vous décrivez assez souvent à l'aide .mouseleave api.jquery.com/mouseleave Vous pourriez essayer.
  • Parce que vous avez besoin mouseleave, mais ce n'est pas mis en œuvre dans Gecko et Webkit quirksmode.org/dom/events/#t017
  • Pourriez-vous poster un minimum de page qui illustre ce problème?
  • P. S. La question est lié à porte de ne jamais obtenir un mouseover ou un mouseout lorsque la souris passe sur un élément très rapidement (c'est à dire que le navigateur n'a jamais envisagé le curseur à être “plus” c'). Dans vos tests, le curseur de commencer à l'intérieur de l'élément?

InformationsquelleAutor callum | 2011-09-16
  1. 7

    Je sais que vous ne voulez pas de solution de contournement, mais vous n'avez pas besoin de vérifier la souris x/y pour savoir si vous êtes dans ou hors d'un élément. Vous pouvez simplement vérifier l'élément à partir duquel l'événement a été déclenché. Si vous mettez un événement mousemove sur le document, l'événement se déclenche à partir de l'un de ses enfants, et vous pouvez comparer qu'élément de l'élément pour savoir si c'est un de ses descendants.

    Ou vous pouvez aller jusqu'à la parentNode arbre et arrêtez-vous si vous trouvez votre élément. Alors vous savez que vous êtes à l'intérieur de l'élément et toujours en elle, sinon vous atteignez le document et que vous êtes à l'extérieur.

    Certains navigateurs mettre en œuvre le mouseenter/mouseleave, j'ai remarqué, sont plus précis que les mouseout. Prototype et jQuery avoir une solution de contournement pour les navigateurs qui ne pas mettre en œuvre ces nouveaux événements. Mouseleave n'est pas le feu d'un élément de enfants, tandis que le mouseout n'.

    InformationsquelleAutor Rafael Raposo
  2. 4

    Vous décrire le déplacement de la souris très rapidement. Lorsque vous vous arrêtez, est le pointeur toujours à l'intérieur de la page? Ce qui est, est le pointeur de votre souris plane toujours sur une partie visible de la page web?

    Si il est allé à l'extérieur, alors il n'est pas nécessairement clair que le navigateur doit faire. Le mouseout événement devrait avoir un relatedTarget bien que les cibles de ce que le pointeur de la souris a disparu dans. Si le pointeur de la souris est déjà en dehors de la zone de page, il n'y aurait pas de cibles pour le pointage.

    Mettre une autre manière, lorsque la souris quitte la zone de page, le navigateur s'arrête de suivi et arrête de signaler sa position. Si vous déplacez votre souris assez vite, à partir du navigateur de point de vue, la souris tout simplement disparu. Il n'est pas jusqu'à ce que vous apporter de la souris dans la zone de délimitation de la partie visible de la page que le navigateur sait où il est, et puis déclenche toutes les actions de mouvement (comme le mouseout).

    InformationsquelleAutor jimbo
  3. 1

    1. Pourquoi ne peut pas le navigateur ne peut pas capturer l'événement mouseout? Si je peux dire de manière fiable lorsque la souris a gauche de la div à l'aide de la solution de contournement ci-dessus, pourquoi ne peut pas le navigateur le faire?

      Je pense que vous avez répondu à cette un vous-même, quand vous avez dit:

      Au lieu de laisser le navigateur de faire tout cela en natif, effectuer des calculs sur chaque pixel se déplacer est un peu de performances.

      Le navigateur n'a pas d'interpolation entre les images, donc, comme vous l'avez indiqué qu'il demanderait beaucoup plus de ressources et de mémoire, qui peut être pourquoi il n'est pas "fixe".

    2. Si certains pixels sont des mouvements de manquer tout comme la souris traverse la limite de la div, pourquoi est-ce que l'événement mouseout devrait également être ignorés? Lorsque le navigateur commence enfin l'enregistrement de la position du curseur souris à nouveau (après un soudain mouvement rapide), même si la souris est maintenant miles à l'extérieur de la boîte, le point est qu'il utilisé pour être dans la zone et n'est plus. Ainsi, pourquoi n'est-il pas alors le feu de l'événement mouseout alors?

      Je ne sais pas pour vous, mais je ne pense pas que c'est une condition de "il avait et il est maintenant hors de". Au lieu de cela, c'est de savoir s'il franchit cette limite (si MouseX - ElemOffsetX= 1). Je suis d'accord, il ne veut pas faire comme beaucoup de sens, mais il pourrait être parce que si vous définissez la valeur de > 1 il déclenche l'événement à plusieurs reprises. Sinon il faudrait garder une trace des événements, ce qui n'est pas en JS de la nature, de voir comment il ajoute juste événements asynch à une pile.

    Ce que vous pourriez faire est d'essayer en utilisant jQuery mouseleave événement. Ce n'est deux choses, ce qui retarde la mise à feu de l'événement:

    1. Il parcourt l'arbre du DOM pour voir si il est vraiment à la gauche de l'élément
    2. Je pense qu'il implémente un délai d'attente d'appel, ce qui devrait résoudre le problème d'interpolation que vous avez remarqué.
    InformationsquelleAutor vol7ron
  4. 1

    J'ai rencontré ce problème plusieurs fois et j'en suis venu à accepter la question comme un fait de la vie. Mais dépendent de vos besoins, vous pouvez simplement utiliser les CSS comme je l'ai fait. Par exemple, si je veux juste afficher/masquer un élément de base sur un autre élément obtenu plané, puis CSS est le chemin à parcourir. En voici un qui fonctionne, fiables exemple:

    .large {
  width: 175px; height: 175px;
  position: absolute;
  border-radius: 100%;

  /*hide the glass by default*/
  top: -9999px;
  left: -9999px;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  z-index: 100;
  pointer-events: none;
}

.small:hover + .large {
  opacity: 1;
}

    http://codepen.io/tanduong/pen/aBMxyd

    InformationsquelleAutor Tan Duong
  5. 0

    J'ai trouvé votre question ainsi que l'absence de réponses claires utile car il m'a dit que je devais créer une solution de contournement. Je l'ai fait en utilisant les idées présentées dans votre question et les autres contributeurs.

    J'ai le même problème lorsque j'utilise jquery mouseleave elem.bind('mouseleave', de données, de mouseLeavesZone);

    Le problème est intermittent et peut être liée à une longue CPU sur le client. Dire, par exemple, le PROCESSEUR est occupé ailleurs lorsque votre souris est déplacée d'une div. Il semble alors logique que cela pourrait être la cause du bug. Je suis d'accord, cela doit être fixé par les fournisseurs de navigateur.

    Voir http://jsfiddle.net/bgil2012/gWP5x/1/

    (Côté: Mon JQuery, le code doit utiliser les anciennes méthodes jQuery car il doit exécuter dans Drupal 7 qui est en cours d'exécution jQuery 1.4, à ce moment, et sans l'application de correctifs qui sont à venir).

    InformationsquelleAutor Bryan