JavaScript - Porque no funciona el primer caso (switch)

   
Vista:

Porque no funciona el primer caso (switch)

Publicado por Paulo (3 intervenciones) el 24/03/2014 22:50:42
Que tal soy nuevo en esto y tengo el siguiente problema, una simple funcion que cambia el color de una caja la he puesto en un switch, al realizar uno de los eventos ya sea click o mousemove deberia de cambiar el color según sea el caso, pero solo utiliza mousemove y el caso "click" se lo salta, en el navegador crome, en ie10 y firefox si funciona, a que se debe o que esta mal espero me puedan ayudar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<head>
<style type="text/css">
 
	div#caja {
		width: 150px;
		height: 150px;
		border: 1px solid grey;
	}
</style>
<script type="text/javascript">
 
	function color(elEvento){
		var evento = elEvento || window.event;
 
		switch (evento.type){
 
			case "click":
				document.getElementById("caja").style.background = "red";
				break;
 
			case "mousemove":
				document.getElementById("caja").style.background = "blue";
		}
	}
 
	onclick = color;
	onmousemove = color;
 
</script>
</head>
<body>
<div id="caja"></div>
</body>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Porque no funciona el primer caso (switch)

Publicado por xve (1594 intervenciones) el 25/03/2014 08:15:49
Hola Paulo, he estado probando tu código, y realmente funciona... pero en que navegador no te funciona? si es en IE anterior a la versión 10, es normal... IE siempre ha sido un dolor de cabeza para los desarrolladores web.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Porque no funciona el primer caso (switch)

Publicado por Paulo (3 intervenciones) el 25/03/2014 16:58:08
Gracias por tu respuesta, siempre que hago practicas programando lo hago utilizando google chrome, en este fue donde me dio el problema estuve un rato probando y probando, y nada después probé en IE10 y en firefox y en estos dos si funciona, ahora que me dices que si te funciono tal vez sea que tengo un inconveniente con el google chrome que tengo instalado, se podría hacer algo con el navegador o cambio a otro para hacer las pruebas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Porque no funciona el primer caso (switch)

Publicado por xve (1594 intervenciones) el 25/03/2014 18:33:43
Hola Paulo, tendría que funcionar-te perfectamente... lo único, que el evento onmousemove, lo ejecuta al mover el ratón por cualquier parte del navegador, no solo por encima de la imagen... pero vaya, creo que también lo ara en IE, no?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Porque no funciona el primer caso (switch)

Publicado por Paulo (3 intervenciones) el 25/03/2014 19:09:50
De echo si funciona en IE, ahora para comprobar si mi navegador (google Chrome) tenia algún defecto ya probé el archivo html en otro pc, y de igual forma no me funciona al hacer click que se supone debería cambiar a rojo pero se queda en azul, el siguiente script es donde tengo la falla por completo que al hacer click debería dar un color para identificar que es el mouse y al presionar una tecla colorear indicando que es el teclado, esa función lo reduje a lo anterior para ver que pasaba tengo el problema solo en google chrome.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style type="text/css">
body {font-family: arial, helvetica;}
#info {width:160px; border:thin solid silver; padding:.5em; position:fixed;}
#info h1 {margin: 0;}
</style>
 
<script type="text/javascript">
function informacion(elEvento) {
	var evento = elEvento || window.event;
 
	switch (evento.type){
 
		case "click":
			document.getElementById("info").style.background = "red";
			break;
		case "mousemove":
			var array = ["Ratón"];
			var ejeX = evento.clientX;
			var ejeY = evento.clientY;
			array[1] = "Navegador [" + "" + ejeX + ", " + ejeY + "]";
			var ejeX2 = evento.screenX;
			var ejeY2 = evento.screenY;
			array[2] = "Página [" + "" + ejeX2 + ", " + ejeY2 + "]";
			document.getElementById("info").style.background = "";
			break;
		case "keypress":
			var array = ["Teclado"];
			var caracter = String.fromCharCode(evento.charCode);
			array[1] = "Carácter [" + caracter + "]";
			array[2] = "Código [" + evento.keyCode + "]";
			document.getElementById("info").style.background = "#CCE6FF";
			break;
	}
 
	muestraInformacion(array);
}
 
function muestraInformacion(mensaje) {
	document.getElementById("info").innerHTML = '<h1>'+mensaje[0]+'</h1>';
	for(var i=1; i<mensaje.length; i++) {
		document.getElementById("info").innerHTML += '<p>'+mensaje[i]+'</p>';
	}
}
 
 
document.onkeypress = informacion;
document.onmousemove = informacion;
 
document.onclick = informacion;
 
</script>

y este el html
1
2
3
4
5
6
7
8
9
<body>
 
<div id="info" on></div>
 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
 
</body>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Porque no funciona el primer caso (switch)

Publicado por xve (1594 intervenciones) el 26/03/2014 07:15:29
Hola Paulo, cuando des clic con el ratón, estate al tanto de no muevas en absoluto el ratón, ya que de golpe te cambiara de color nuevamente, ya que también detecta el movimiento del ratón.

si quieres hacer la prueba, comenta la linea:
1
//document.onmousemove = informacion;

y veras como si te funciona el clic sobre la imagen.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar