Misma funcion para mouseover y mouseout ¿Cómo distinguirlos?

derkenuke · #1 (**permalink**) 06/09/2007, 21:47

Hola.

Estoy trabajando con manejadores para los eventos mouseover y mouseout para capas DIV, y quería utilizar una sola función para manejar los dos eventos. Entonces el problema está en cómo diferenciar el mouseover del onmouseout, y yo creo que la solución está en analizar hacia qué elemento se desplaza el ratón en cada movimiento (así sabre si entra o sale).

Tengo tres capas DIV. Cuando hago mouseover sobre cualquiera, se muestra una frase en una cuarta capa DIV de información. Cuando hago mouseout quiero que la capa de información muestre la frase "_".

Bueno, en IE lo he conseguido (obtengo el window.event.toElement para saber a qué elemento me dirijo, y si me dirijo a una capa lo sé, y si me dirijo fuera -al body por ejemplo- también lo sabré). En firefox no sé muy bien cómo saber a dónde voy ni de dónde vengo. No consigo utilizar bien evt.target, evt.currentTarget y evt.relatedTarget para hacer lo que quiero.

Dejo el código para ver quién puede instruirme:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
 
</style> 
</head> 
 
<body> 
 
<div id="botonNaranja">NARANJA</div><br/> 
<div id="botonAzul">AZUL</div><br/> 
<div id="botonVerde">VERDE</div><br/> 
 
<div id="info">_</div> 
 
 
<script type="text/javascript"> 
<!-- 
 
 
// document.getElementById abreviado 
function $(x) { return document.getElementById(x); } 
 
 
 
function listen(elem, evento, func) { 
    if (elem.addEventListener)  // W3C DOM 
        elem.addEventListener(evento,func,false); 
    else if (elem.attachEvent) { // IE DOM 
        var r = elem.attachEvent("on"+evento, func); 
        return r; 
    } 
    else throw "No es posible añadir evento"; 
} 
 
 
function setInfo(evt) { 
    var adonde = window.event ? window.event.toElement : evt.target; 
    var miId = adonde.getAttribute("id"); 
    //alert( evt.currentTarget == evt.relatedTarget ); 
    //alert( "current: "+evt.currentTarget.tagName +", related: "+evt.relatedTarget.tagName +", "+miId); 
    if( miId=="botonNaranja" ) { 
        var str = "naranja"; 
    } 
    else if( miId=="botonAzul" ) { 
        var str = "azul"; 
    } 
    else if( miId=="botonVerde" ) {  
        var str = "verde"; 
    } 
    else { 
        var str = "_"; 
    } 
    $("info").innerHTML = str; 
} 
 
listen( window, "load", function() { 
    btnNaranja = $("botonNaranja"); 
    btnAzul = $("botonAzul"); 
    btnVerde = $("botonVerde"); 
 
    listen( btnNaranja, "mouseover", setInfo); 
    listen( btnNaranja, "mouseout", setInfo); 
    listen( btnAzul, "mouseover", setInfo); 
    listen( btnAzul, "mouseout", setInfo); 
    listen( btnVerde, "mouseover", setInfo); 
    listen( btnVerde, "mouseout", setInfo); 
} ); 
 
 
// --> 
</script> 
 
</body> 
</html>

PD: Y no, no quiero usar dos funciones para los dos eventos, perdería la gracia y mi pregunta no tendría sentido.

Un saludo.

Txumai · #2 (**permalink**) 07/09/2007, 05:34

Pon dos funciones una para cada evento, y de ellas rediriges a la otra con un parámetro para saber lo que sea.
En IE los toElement y fromElement se usan para arrastrar y copiar. EL target es el srcElement en IE.

derkenuke · #3 (**permalink**) 07/09/2007, 07:03

Cita:

Iniciado por Txumai

Pon dos funciones una para cada evento

Cita:

Iniciado por derkeNuke

PD: Y no, no quiero usar dos funciones para los dos eventos, perdería la gracia y mi pregunta no tendría sentido.

Y si has probado srcElement en mi código verás que no funciona, porque al hacer mouseout el srcElement sigue siendo el DIV del que has salido, y no el <body> como quiero. Así que en IE me va perfecto, pero en FF no consigo el equivalente.

kepawe · #4 (**permalink**) 07/09/2007, 11:20

Hola dernuke y Txumai.

Para saber que evento se ha disparado tienes la propiedad type.

Código:

function listener(event){
	if(event.type == "mouseover"){
	
	}
	else if(event.type == "mouseout"){
	
	}

}

Salu2

derkenuke · #5 (**permalink**) 08/09/2007, 21:30

Siii, eso sí que funciona!!

Bueno, al final me quedó así de simple el código, y lo hace todo como se espera:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
<head> 
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" /> 
<meta name="Author" content="derkeNuke" /> 
<title>Página nueva</title> 
<style type="text/css"> 
 
</style> 
</head> 
 
<body> 
 
<div id="botonNaranja">NARANJA</div><br/> 
<div id="botonAzul">AZUL</div><br/> 
<div id="botonVerde">VERDE</div><br/> 
 
<div id="info">_</div> 
 
 
<script type="text/javascript"> 
<!-- 
 
 
// document.getElementById abreviado 
function $(x) { return document.getElementById(x); } 
 
 
 
function listen(elem, evento, func) { 
    if (elem.addEventListener)  // W3C DOM 
        elem.addEventListener(evento,func,false); 
    else if (elem.attachEvent) { // IE DOM 
        var r = elem.attachEvent("on"+evento, func); 
        return r; 
    } 
    else throw "No es posible añadir evento"; 
} 
 
 
function setInfo(evt) { 
    // Obtenemos el elemento asociado al evento 
    var adonde = evt.target || window.event.srcElement; 
    // Detectamos el tipo de evento (mouseover|mouseout) 
    var tipo = evt.type || window.event.type; 
    if( tipo == "mouseover" )    // Si estamos entrando 
        str = adonde.getAttribute("id").replace("boton", "").toLowerCase(); 
    else                        // Si estamos saliendo colocamos "_" 
        var str = "_"; 
    $("info").innerHTML = str; 
} 
 
 
listen( window, "load", function() { 
    btnNaranja = $("botonNaranja"); 
    btnAzul = $("botonAzul"); 
    btnVerde = $("botonVerde"); 
 
    listen( btnNaranja, "mouseover", setInfo); 
    listen( btnNaranja, "mouseout", setInfo); 
    listen( btnAzul, "mouseover", setInfo); 
    listen( btnAzul, "mouseout", setInfo); 
    listen( btnVerde, "mouseover", setInfo); 
    listen( btnVerde, "mouseout", setInfo); 
} ); 
 
 
// --> 
</script> 
 
</body> 
</html>

Probablemente me ahorraré un par de funciones con ésto.

Gracias kepawe!

kepawe · #6 (**permalink**) 09/09/2007, 13:54

De nada, derkenuke. Me alegra haberte servido de ayuda.
Como dicen, hoy por tí, mañana por mí.

Salu2.