Mover elemento activo pierde evento mouseout en Internet Explorer

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

Pregunta

En una biblioteca que estoy usando tengo la tarea de mover un elemento a la parte delantera del dom cuando se movía sobre. (Me lo hacen más grande, así que necesito verlo, luego encoge de nuevo cuando está fuera del ratón).

La biblioteca estoy usando tiene solución pura que utiliza appendChildren en el elemento activo para moverlo hasta el final su matriz de modo más hacia el final de la dom y a su vez en la parte superior.

El problema es que creo que debido a que el elemento que se está moviendo es el que se ciernen sobre el evento mouseout se pierde. El puntero del ratón está todavía sobre el nodo, pero no se generó el evento mouseout.

He despojado a la baja funcionalidad para confirmar el problema. Funciona bien en Firefox pero no en cualquier versión de IE. Estoy usando jQuery aquí para la velocidad. Las soluciones pueden estar en edad javascript..which normal sería una preferencia, ya que podría tener que volver a subir la corriente.

No puedo utilizar z-index aquí como los elementos son VML, la biblioteca es Raphael y yo estoy usando la llamada toFront. Muestra utilizando ul / li para mostrar el tema en un ejemplo sencillo 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
    li
    {
        border:1px solid black;
    }
</style>
</head>
<body>
<ul><li>Test 1</li></ul>
<ul><li>Test 2</li></ul>
<ul><li>Test 3</li></ul>
<ul><li>Test 4</li></ul>
<script>
$(function(){
    $("li").mouseover(function(){
        $(this).css("border-color","red");
        this.parentNode.appendChild(this);
    });

    $("li").mouseout(function(){
        $(this).css("border-color","black");
    });
});
</script>
</body>
</html>

Editar Aquí hay un enlace a una pasta papelera de JS para verlo en acción. http://jsbin.com/obesa4

** Edición 2:. ** Ver todos los comentarios en todas las respuestas antes de envíos como mucha más información en la que

¿Fue útil?

Solución

El problema es que los mangos IE mouseover diferente , ya que se comporta como mouseenter y mousemove combinado en un elemento. En otros navegadores es sólo mouseenter.

Así que, incluso después de su ratón ha entrado en el elemento de destino y que ha cambiado su aspecto y reappended que a ella de mouseover padre será todavía el fuego de todos los movimientos del ratón, el elemento se reappended nuevo, lo que impide que otros controladores de eventos de bienestar llamada.

La solución es emular el mouseover correcta comportamiento de modo que las acciones en onmouseover se ejecutan sólo una vez. 

$("li").mouseover( function() {
    // make sure these actions are executed only once
    if ( this.style.borderColor != "red" ) {
        this.style.borderColor = "red";
        this.parentNode.appendChild(this);
    }
});

Ejemplos

  1. Extented demostración de los suyos
  2. Ejemplo que demuestra la diferencia mouseover entre los navegadores (bonus: javascript nativo)

Otros consejos

Yo era capaz de conseguir que funcione con divs anidados y un evento MouseEnter en la matriz: 

<div id="frame">
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>
...
$('#frame').mouseenter(function() {
     $(".box").css("border-color", "black");
});

Aquí hay una versión de trabajo utilizando Raphael:

http://jsfiddle.net/xDREx/

I modificado respuesta @galambalazs' porque encontré que no si me rondaba muy rápidamente sobre los elementos li, ya que algunos de los elementos sería aún conservan el efecto mouseover.

Se me ocurrió una solución que elimina el estado estacionario en elementos que no pudieron desencadenar el evento mouseover empujando estos elementos a una pila cada vez que el mouseover incluso se dispara. En cualquier momento, ya sea el evento mouseover o mouseout se llama, I POP los elementos de esta matriz y eliminar los estilos colocados en él: 

$(function(){

    // Track any hovered elements
    window.hovered = [];

    $("li").mouseover(function() {
        // make sure that these actions happen only once
        if ( $(this).css("border-color") != "red" ) {
            resetHovered ();  // Reset any previous hovered elements
            $(this).css("border-color","red");
            this.parentNode.appendChild(this);
            hovered.push(this);
        }
    });

    $("li").mouseout(function(){
        resetHovered();  // Reset any previous hovered elements
    });

    // Reset any elements on the stack
    function resetHovered () {
        while ( hovered.length > 0 ) {
            var elem = hovered.pop();
            $(elem).css("border-color","black");
        }
    }
});

He probado esta solución con IE 11. Un ejemplo funcional se puede encontrar aquí .

Eso es poco firme, y parece ser de sólo IE (pero también lo es VML). Si el elemento padre tiene una altura especificada, se puede conectar el controlador mouseout al padre ... pero parece que no va a funcionar en su situación. Su mejor alternativa es utilizar al pasar el ratón sobre los elementos adyacentes de ocultarlo: 

$(function()
{
    $("li").mouseover(function()
    {
        $("li").css("border-color", "black");
        $(this).css("border-color", "red");
        this.parentNode.appendChild(this);
    });
});

O SVG. Se puede utilizar z-index en SVG.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top