Hola a todos!
Creo que encontré un error ó al menos un comportamiento diferente en firefox 2 y 3 con respecto al evento 'mousemove'.
Fijense el siguiente codigo:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<script type='text/javascript'>
//
// Esto es solo la dollar function... no den bola...
//
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string') {
element = document.getElementById(element);
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
}
// FLAG Booleana
var action = false;
function test(obj) {
// Imprimo en el textbox 'txt' el valor de 'ACTION'
$('txt').value = action;
// SOLO si la variable 'action' es TRUE, imprimo en el textbox 'srcid' el ID de la DIV
// sobre la cual estoy parado
if (action == true) {
$('srcid').value = obj.id;
}
}
</script>
<style type='text/css'>
BODY {
padding:0;
margin:0;
background-color: #aaaaaa;
}
#grid {
width:400px;
height:400px;
margin:auto;
margin-top:5%;
background-color: #333333;
}
.cell {
width:50px;
height:50px;
overflow:hidden;
background-color: #ffffff;
float:left;
margin: 10px;
}
</style>
</head>
<body id='body_ref'>
ACTION VALUE: <input type='text' value='0' id='txt' /><br/>
DIV ID: <input type='text' value='' id='srcid' value='' /><br/>
<hr />
<div id='grid' onmousedown='javascript:action=true;' onmouseup='javascript:action=false;'>
<div id='cell_1' class='cell' onmousemove='test(this);'></div>
<div id='cell_2' class='cell' onmousemove='test(this);'></div>
<div id='cell_3' class='cell' onmousemove='test(this);'></div>
</div>
</body>
</html>
En IE7: Si hago click sobre una de las div blancas y sin dejar de presionar el boton del mouse me muevo hacia las otras DIVs blancas, el evento se dispara nuevamente en cada una de ellas y en el texbox 'srcid' veo que actualizado el ID de la div sobre la cual estoy parado.
En FIREFOX (2 y 3): Si hago click en una div blanca, se actualiza el textbox con su ID, pero al moverme a otras div el evento no se dispara.
PERO, si hago click dentro de la div contenedora negra y LUEGO comienzo a moverme sobre las divs blancas, el evento SI se dispara y el textbox 'txt' se actualiza bien.
Estoy intentando descubrir por qué sucede esto y no doy en el clavo... ¿alguno tiene alguna IDEA sobre cual es el problema y si hay alguna posible solución?
A mi lo unico que se me ocurre es que FIREFOX intenta 'arrastrar' el elemento, como cuando drageamos texto ó una imagen y esta funcionalidad propia del programa cliente anula la combinación de eventos javascript
: onmousedown + onmousemove
Gracias por sus aportes!
un saludo
PD: Esto mismo lo probe con JQuery y luego con DOM Events echo a mano, y el comportamiento es el mismo.