Problèmes avec l'événement mouseout

StackOverflow https://stackoverflow.com/questions/49630

Question

J'utilise JavaScript pour masquer une image et afficher du texte caché en dessous.Mais, lorsque le texte est affiché si vous le faites défiler, il déclenche l'événement mouseout sur le conteneur, qui masque ensuite le texte et affiche à nouveau l'image, et il entre simplement dans une boucle étrange.

Le code HTML ressemble à ceci :

<div onmouseover="jsHoverIn('1')"
     onmouseout="jsHoverOut('1')">
    <div id="image1" />
    <div id="text1" style="display: none;">
        <p>some content</p>
        <p>some more content</p>
    </div>
</div>

Et le javascript (il utilise scriptaculous) :

function jsHoverIn(id) {
  if(!visible[id]) {
    new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
    new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
    visible[id] = true;
  }
}
function jsHoverOut (id) {
  var scope = Effect.Queues.get(id);
  scope.each(function(effect) { effect.cancel(); });

  new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
  new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
  visible[id] = false;
}

Cela semble très simple, mais je n’arrive pas à comprendre.

Était-ce utile?

La solution

Je donnerais au conteneur div :

position: relative;

et ajoutez un troisième div dans le conteneur (qui devrait être le dernier enfant du conteneur) avec :

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

et capturez plutôt les événements mouseover et mouseout sur ce div.

Comme il n'a pas d'éléments enfants, vous ne devriez pas recevoir de faux événements de survol et de sortie de souris qui s'y propagent.

Modifier:

Ce que je crois se produit, c'est que lorsque le curseur se déplace d'un élément parent vers un élément enfant, un événement mouseout se produit sur l'élément parent et un événement mouseover se produit sur l'élément enfant.Cependant, si le gestionnaire de survol de l'élément enfant n'attrape pas l'événement et n'arrête pas sa propagation, l'élément parent recevra également l'événement de survol.

Autres conseils

On dirait que ce que tu veux vraiment, c'est mouseenter/mouseleave (Événements propriétaires IE, mais faciles à émuler) :

// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
    var rel = e.relatedTarget, cur = e.currentTarget;
    if (rel && rel.nodeType == 3) {
        rel = rel.parentNode;
    }
    if(
        // Outside window
        rel == undefined ||
        // Firefox/other XUL app chrome
        (rel.tagName && rel.tagName.match(/^xul\:/i)) ||
        // Some external element
        (rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
    ) {
        e.currentTarget.fire('mouse:' + this, e);
        return;
    }
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));

// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);

Alternativement, patch prototype.js et utilise mouseenter et mouseleave avec confidence.Notez que j'ai étendu la vérification pour quitter la fenêtre ou entrer dans XUL Chrome ;cela a semblé résoudre certains cas extrêmes dans Firefox pour moi.

Ce n'est peut-être pas la meilleure solution, mais vous pouvez définir une variable booléenne globale qui serait accessible aux deux méthodes et qui spécifierait simplement si la dernière action était HoverIn ou HoverOut.Vous pouvez utiliser cette variable booléenne pour déterminer si le code doit s'exécuter ou non. 

if (bWasHoverIn){
   ...
}

L'événement onmouseover ne devrait-il pas être sur le div image et l'événement onmouseout sur le div texte ?

@Ryan Le booléen n'aide pas vraiment, il évite simplement la boucle, mais l'événement de survol de la souris est toujours déclenché et le texte est masqué.

@Brian C'était comme ça, mais ça se comportait de la même manière.

Je ne sais pas si cela correspondrait au reste de votre style, mais peut-être que si vous modifiiez le CSS sur le div de texte pour qu'il ait la même taille que l'image, ou si vous fixiez la taille du div externe, alors lorsque vous passez la souris événement déclenché, la taille du div externe ne changerait pas au point de provoquer l'événement mouseout.

Est-ce que ça a du sens?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top