Problemas con el evento mouseout

Question

Estoy usando JavaScript para ocultar una imagen y mostrar algunas de texto de eso se oculta bajo ella.Pero, cuando el texto se muestra si se desplaza sobre él, se desencadena el evento mouseout en el recipiente, que luego se esconde el texto y muestra la imagen de nuevo, y esto solo en un extraño bucle.

El html se parece a esto:

<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>

Y el javascript (usa 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;
}

Esto parece muy simple, pero yo no puedo envolver mi cabeza alrededor de ella.

Answer 1

Me gustaría dar el div contenedor:

position: relative;

y añadir una tercera div en el contenedor (que debe ser el último hijo del contenedor) con:

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

y coger el mouseover y mouseout eventos en este div lugar.

Porque no tiene elementos secundarios, usted no debería tener espurias mouseover y mouseout eventos propagar a ella.

Editar:

Lo que creo que pasa, es que cuando el cursor se mueve de un elemento primario en un elemento secundario, un evento mouseout se produce en el elemento principal, y un evento mouseover se produce en el elemento secundario.Sin embargo, si el controlador de ratón en el elemento secundario no capturar el evento y detener su propagación, el elemento principal que también recibirá el evento mouseover.

Answer 2

Suena como lo que realmente quiere es mouseenter/mouseleave (Es decir, de propiedad de los eventos, pero es fácil de emular):

// 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);

Alternativamente, parche prototype.js y el uso de mouseenter y mouseleave con confianza.Tenga en cuenta que he ampliado el cheque para salir de la ventana o de entrar en XUL chrome;esto se parece a fijar en algunos casos el borde en Firefox para mí.

Answer 3

Esta puede no ser la mejor solución, pero usted podría fijar una variable booleana que sería accesible a los métodos que se acaba de especificar si la última acción fue HoverIn o HoverOut.Usted podría utilizar esta variable booleana para determinar si el código debe ejecutarse o no.

if (bWasHoverIn){
   ...
}

Answer 4

No debería el evento onmouseover ser en la imagen div y el evento onmouseout estar en el texto del div?

Answer 5

@Ryan boolean realidad no ayuda, sólo evita el bucle, pero el evento mouseover todavía es despedido y el texto se hiden.

@Brian solía ser de esa manera, pero se comportaban de la misma manera.

Answer 6

No estoy seguro de si esto encajaría con el resto de su estilo, pero tal vez si ha cambiado el css en el texto del div, así que fue el mismo tamaño de la imagen, fija o el tamaño de la parte externa del div, luego, cuando el evento mouseover despedido, el tamaño del div externa no iba a cambiar tanto como para causar el evento mouseout.

¿Esto tiene sentido?