onmouseout se ejecuta aun sin quitar el mouse

israbart · #1 (**permalink**) 14/11/2011, 17:47

Buenas tardes,

Nuevamente recurro a ustedes debido a que ya no se me ocurre el porque. Tengo este código el cual realiza un efecto de tamaño en un menu.

Código:

function aumentardiv(id)
{
	var div = document.getElementById('menu'+id);
	widthBMv = widthBMv + 1;
	var width_aux = div.style.width;
	width_aux = width_aux.substr(0,width_aux.length - 2);
        if(parseInt(width_aux) >= 350){
		div.style.width = '350px';
                clearInterval(tempoautD_aux);
                tempoautD_aux = '';
		return;
	}else{
	        width_aux = parseInt(width_aux) + parseInt(widthBMv);
	        div.style.width = width_aux + 'px';
	}
	tempoautD_aux = setTimeout("aumentardiv("+id+")",10);
}

function disminuirdiv(id)
{
	var div = document.getElementById('menu'+id);
	widthBMv = widthBMv - 1;
	var width_aux = div.style.width;
	width_aux = width_aux.substr(0,width_aux.length - 2);
	if(parseInt(width_aux) <= 238){
		div.style.width = '238px';
                clearInterval(tempoautD_aux);
                tempoautD_aux = '';
		return;
	}else{
                width_aux = parseInt(width_aux) + parseInt(widthBMv);
               div.style.width = width_aux + 'px';
	}
	tempoautD_aux = setTimeout("disminuirdiv("+id+")",10);
}

El código HTML de la etiqueta queda así:

Código HTML:

<div id='menu0' style='width: 238px;' onmouseover='javascript:aumentardiv(0)' onmouseout='javascript:disminuirdiv(0);'><span>Item 1</span></div>

El problema esta en que si dejo el cursor del mouse en Item 1 las funciones de los eventos onmouseover y onmouseout se ejecutan una tras otra ciclicamente hasta que quite el cursor del Item1.

Lo raro es que si quito la etiqueta <span> las funciones se ejecutan de manera correcta.

Ahora si que como dice eugenio derbez, ¿Que alguien me explique? Por favor.

Saludos

quimfv · #2 (**permalink**) 15/11/2011, 06:04

Necesitas ese span?

Lo digo porque tal y como nos lo pasas no hace absolutamente nada....

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
</head>
<script language="JavaScript" type="text/JavaScript">
var widthBMv=0;
function aumentardiv(id)
{
    var div = document.getElementById('menu'+id);
    widthBMv = widthBMv + 1;
    var width_aux = div.style.width;
    width_aux = width_aux.substr(0,width_aux.length - 2);
        if(parseInt(width_aux) >= 350){
        div.style.width = '350px';
                clearInterval(tempoautD_aux);
                tempoautD_aux = '';
        return;
    }else{
            width_aux = parseInt(width_aux) + parseInt(widthBMv);
            div.style.width = width_aux + 'px';
    }
    tempoautD_aux = setTimeout("aumentardiv("+id+")",10);
}
 
function disminuirdiv(id)
{
    var div = document.getElementById('menu'+id);
    widthBMv = widthBMv - 1;
    var width_aux = div.style.width;
    width_aux = width_aux.substr(0,width_aux.length - 2);
    if(parseInt(width_aux) <= 238){
        div.style.width = '238px';
                clearInterval(tempoautD_aux);
                tempoautD_aux = '';
        return;
    }else{
                width_aux = parseInt(width_aux) + parseInt(widthBMv);
               div.style.width = width_aux + 'px';
    }
    tempoautD_aux = setTimeout("disminuirdiv("+id+")",10);
}</script>
 
<body>
<div id='menu0' style='width: 238px;background-color: #CC6666;' onmouseover='javascript:aumentardiv(0)' onmouseout='javascript:disminuirdiv(0);'>
<span style=';background-color: #666666;'>Item 1</span>
</div>
</body>
</html>

Aqui verás en colores distintos el div y el span.

He hecho esta prueba en fire y en ie y parece que funciona...

Solo se repiten los eventos cuando colocas el mouse en una zona de pantalla que entra y sale de del div en funcion de los cambios de tamaño que provoca el script pero tanto si tienes el span como si no lo tienes...

israbart · #3 (**permalink**) 15/11/2011, 13:15

Gracias por la respuesta, el span lo necesitaba porque en la hoja de estilos tengo una clase para ese span. Y con otra funcion de javascript quito o pongo esa etiqueta.

Aun sigo sin saber porque sucede esto. Oh porque en mi maquina si sucede y en la de quimfv no. Por ahora lo solucione quitando el span y cambiando el estilo del div con la funcion de javascript.

Seguire investigando el porque y si logro dar con la respuesta la posteare para le conocimiento de todos.