Foros del Web » Programando para Internet » Javascript »

saber si el mouse está fuera del div

Estas en el tema de saber si el mouse está fuera del div en el foro de Javascript en Foros del Web. Buenas! Tengo un problemilla con un div... En la web que estoy creando, al hacer click en un elemento se crea un div, y quería ...
  #1 (permalink)  
Antiguo 13/06/2012, 00:45
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años
Puntos: 33
saber si el mouse está fuera del div

Buenas!
Tengo un problemilla con un div...

En la web que estoy creando, al hacer click en un elemento se crea un div, y quería programar la web para que cuando no hiciera falta el div desapareciera (es decir, cuando se haga click fuera del div, o se salga, o cualquier otra cosa parecida)

Al principio puse un manejador de evento en onMouseOut, pero al haber divs dentro de este, a la mínima saltaba el evento y desaparecía el div.

Después puse manejadores en los div (en onMouseOver) para que mostraran el div. Así se solucionaba el problema de la desaparición del div, pero perdía el resto de funcionalidades (tengo un evento en onClick que cambia el texto del div, pero se solapan los eventos y no me cambia el texto)

Más tarde pensé en manejar el evento onClick del body, para que, si el div tenía algo de texto, desapareciera. Esto tampoco me funcionó porque al hacer click para mostrar el div estás haciendo click en el body...

¿Qué podría hacer para conseguir un efecto del estilo (es decir que al hacer click fuera del div desaparezca, o que al salir del div desaparezca, o algo similar)? He pensado en poner algún icono de cerrado, pero no me acaba de convencer.

Gracias!
  #2 (permalink)  
Antiguo 13/06/2012, 02:39
Avatar de YYs86  
Fecha de Ingreso: abril-2012
Ubicación: Salamanca
Mensajes: 136
Antigüedad: 12 años
Puntos: 14
Respuesta: saber si el mouse está fuera del div

La solución jquery es mouseleave(), con eso controlas la salida del ratón de tu target:

Código Javascript:
Ver original
  1. $('.div').mouseleave(function(){
  2.  
  3.    $(this).hide();
  4.  
  5. }
__________________
Web developer:

http://xtremgaming.es
http://leaderleague.com
  #3 (permalink)  
Antiguo 13/06/2012, 03:12
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años
Puntos: 33
Respuesta: saber si el mouse está fuera del div

Gracias por la respuesta, pero nunca he tocado nada de jquery. Por algunas bibliotecas de javascript puedo deducir que el "$" es un getElementById(), por lo que supongo que tendría que hacer una función aparte con este código, pero, ¿Como enlazaría el evento al jqery?, ¿Lo hace auto?

De todas maneras, había pensado dejar el jquery para último recurso, ya que no uso nada de jquery en ninguna parte de la web, y usarlo solamente para esto...

Gracias de todos modos, lo tendré en cuenta
  #4 (permalink)  
Antiguo 13/06/2012, 03:30
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: saber si el mouse está fuera del div

Cita:
Iniciado por DoHITB Ver Mensaje
Gracias por la respuesta, pero nunca he tocado nada de jquery. Por algunas bibliotecas de javascript puedo deducir que el "$" es un getElementById(), por lo que supongo que tendría que hacer una función aparte con este código, pero, ¿Como enlazaría el evento al jqery?, ¿Lo hace auto?

De todas maneras, había pensado dejar el jquery para último recurso, ya que no uso nada de jquery en ninguna parte de la web, y usarlo solamente para esto...

Gracias de todos modos, lo tendré en cuenta
mirá este ejemplo. está aplicado a otra cosa pero por ahi puedas extraer algo
http://foros.emprear.com/javascript/...as-ctexto.html
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 13/06/2012, 07:45
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: saber si el mouse está fuera del div

Eso estaba resuelto por algún lado del Foro.
Lástima que no pusiste un ejemplo para ver qué particularidad tiene tu código, que no se arregla.
Y estoy de acuerdo: poner un yáicueri para semejante güevada es un despropósito. En todo caso te lo bajas y sacas de adentro la parte que te sirve para meterla en tu página. Así le quitas también los "$".

Miré el ejemplo que dejaste, emprear. No es mouseover. ¿Hay que abrir el código?.
  #6 (permalink)  
Antiguo 13/06/2012, 14:21
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: saber si el mouse está fuera del div

Cita:
Iniciado por furoya Ver Mensaje
Eso estaba resuelto por algún lado del Foro.
Lástima que no pusiste un ejemplo para ver qué particularidad tiene tu código, que no se arregla.
Y estoy de acuerdo: poner un yáicueri para semejante güevada es un despropósito. En todo caso te lo bajas y sacas de adentro la parte que te sirve para meterla en tu página. Así le quitas también los "$".

Miré el ejemplo que dejaste, emprear. No es mouseover. ¿Hay que abrir el código?.
No mi ejemplo no es mouseover, si de lo expresado por @DoHITB me quedo con
Cita:
al hacer click en un elemento se crea un div, y quería programar la web para que cuando no hiciera falta el div desapareciera (es decir, cuando se haga click fuera del div, o se salga, o cualquier otra cosa parecida)
Cita:
Más tarde pensé en manejar el evento onClick del body, para que, si el div tenía algo de texto, desapareciera. Esto tampoco me funcionó porque al hacer click para mostrar el div estás haciendo click en el body...
De ahi que le indicara que quizás de mi ejemplo pudiese extraer algo.
Yo creo que más que si es onclick ó onmouseover, u otro evento, lo que el quiere es que el evento se produzca sobre cualquier elemento de la página que no sea ese div y sus contenedores... u algo asi

Y si quiere don @Furoya, despanzurre el código cuanto desee, que para eso está

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 13/06/2012, 14:27
 
Fecha de Ingreso: marzo-2009
Mensajes: 395
Antigüedad: 15 años, 1 mes
Puntos: 11
Respuesta: saber si el mouse está fuera del div

Te aconsejo que uses jquery. Es sencillisimo y mucho mas fácil de usasr que javscript
  #8 (permalink)  
Antiguo 13/06/2012, 14:41
Avatar de dontexplain  
Fecha de Ingreso: junio-2012
Mensajes: 536
Antigüedad: 11 años, 10 meses
Puntos: 127
Respuesta: saber si el mouse está fuera del div

mouseleave se produce cuando el ratón ha estado previamente dentro del div, si desea hacer que un div desaparezca sin necesidad de haber estado el ratón en algún momento dentro del div puede simplemente crear un contador con setTimeout cuando desee, cuando el usuario pase el ratón simplemente se destruye el contador por clearTimeout.


Un saludo.
  #9 (permalink)  
Antiguo 13/06/2012, 22:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: saber si el mouse está fuera del div

Cita:
Iniciado por Gothgauss Ver Mensaje
Te aconsejo que uses jquery. Es sencillisimo y mucho mas fácil de usasr que javscript
No hay caso. No se dan por aludidos.
Aunque a veces la culpa no la tiene el chancho sino el que le da de comer.

¿Y si vamos todos los programadores a la casa de José Query y lo patoteamos?


Cita:
Iniciado por dontexplain Ver Mensaje
mouseleave se produce cuando el ratón ha estado previamente dentro del div, si desea hacer que un div desaparezca sin necesidad de haber estado el ratón en algún momento dentro del div puede simplemente crear un contador con setTimeout cuando desee, cuando el usuario pase el ratón simplemente se destruye el contador por clearTimeout.
No está mal. Sería como los tooltip de sistema.


Cita:
Iniciado por emprear Ver Mensaje
Y si quiere don @Furoya, despanzurre el código cuanto desee, que para eso está
Por supuesto, no me lo voy a perder

Creaste un area clickeable alrededor de los párrafos, y les apuntás por la clase.
Por supuesto, hay que recorrer todos con for, no queda otra.

O podés usar una librería.
  #10 (permalink)  
Antiguo 15/06/2012, 09:02
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años
Puntos: 33
Respuesta: saber si el mouse está fuera del div

Cita:
Iniciado por furoya Ver Mensaje
Eso estaba resuelto por algún lado del Foro.
Lástima que no pusiste un ejemplo para ver qué particularidad tiene tu código, que no se arregla.
Y estoy de acuerdo: poner un yáicueri para semejante güevada es un despropósito. En todo caso te lo bajas y sacas de adentro la parte que te sirve para meterla en tu página. Así le quitas también los "$".

Miré el ejemplo que dejaste, emprear. No es mouseover. ¿Hay que abrir el código?.
Gracias a todos por las respuestas. Desde luego me niego a usar jquery para esto... si fuera algo más complejo (un evento drag&drop, por ejemplo) me plantearía usar alguna librería (soy un tipo de programador que me gusta usar todo hecho por mi, sin usar demasiadas cosas de terceros...).

Sobre las particularidades del código... comento:

Tengo una serie de div colocados a modo de celdas. Cada "celda" (div) tiene su id, así como su evento onClick, con una función que recibe ese índice.

Así, la función crea unas coordenadas a partir del dato pasado, y modifica el div en cuestión (el que me da problemas) para que se coloque justo encima del div pulsado, y así emular que ha cambiado el contenido (cambiar el contenido directamente es muy complicado ya que cada div contiene cierta información que varía cada vez, y guardar el innerHTML del div y ir pasándolo de una función a otra, o en una variable supone en este caso una vulnerabilidad bastante grave de la seguridad de la página )

El div nuevo (con id="dummy") contiene una estructura similar a esta

Código:
function div(index){
        f = Math.floor(index/7);
	c = index%7;

	document.getElementById('dummy').style.top = (484+(f*158)+(f*37));
	document.getElementById('dummy').style.left = (594+(c*115)+(c*6));
	document.getElementById('dummy').style.backgroundColor = '#EFEFEF';
	
	
	str = '<div style="background-color: #EFEFEF" id=con>' + 
			'<div class=txtChangeSpecial style="top: 30px;left: 18px;"><a href="#" style="color: #000000;">TXT1</a></div>' +
			'<div class=txtChangeSpecial style="top: 70px;left: 29px;" onClick="txt(2);">TXT2</div>' +
			'<div class=txtChangeSpecial style="top: 110px;left: 17px;" onClick="txt(1);" ">TXT3r</div>' +
		  '</div>';
	document.getElementById('dummy').innerHTML = str;
La función txt cambia el innerHTML del div con id=con.
Ahora vuelvo al principio. Este div está dentro del body, y dentro de un div general, por lo que ni en el body ni en el div general puedo manejar el onClick, ya que el mismo click que crea el div lo destruye. El evento de salida del mouse tampoco, ya que hay div's internos que al acercarse eliminan el div. Si quito los div internos, siguen quedando los links, y si en los div internos pongo una función que "reconstruya" el div "dummy", al hacer click no funciona la función txt...

Lo que se me ocurre también es crear un div grande que sustituya al div general, y que éste tenga el evento onClick, aunque no se si daría resultado... me da que haría lo mismo que con el click en el body...

El ejemplo que hay por este tema me serviría, pero en ese ejemplo los div están "separados" del div general (no son hijos)... en mi caso no es así, por eso no me funciona...

Gracias de nuevo a todos y saludos
  #11 (permalink)  
Antiguo 15/06/2012, 09:43
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: saber si el mouse está fuera del div

¿Es muy complicado hacer una demo con lo más básico de tu página para verla funcionando?
En el código que pasaste falta el HTML, seguramente el CSS y en el escript lo más importante, que es esa función txt(n), la que seguramente hay que modificar. Además, sobra alguna variable, qué no entiendo para qué está.

Sería más fácil trabajar sobre una maqueta que sobre interpretaciones.

Con publicar el código entre <html> y </html> creo que nos arreglamos.
  #12 (permalink)  
Antiguo 15/06/2012, 12:00
 
Fecha de Ingreso: abril-2012
Ubicación: 41°37′00″N, 00°37′00″E
Mensajes: 462
Antigüedad: 12 años
Puntos: 33
Respuesta: saber si el mouse está fuera del div

Cita:
Iniciado por furoya Ver Mensaje
¿Es muy complicado hacer una demo con lo más básico de tu página para verla funcionando?
En el código que pasaste falta el HTML, seguramente el CSS y en el escript lo más importante, que es esa función txt(n), la que seguramente hay que modificar. Además, sobra alguna variable, qué no entiendo para qué está.

Sería más fácil trabajar sobre una maqueta que sobre interpretaciones.

Con publicar el código entre <html> y </html> creo que nos arreglamos.
Nada me gustaría más que pasaros el link o el código completo de la web, pero la politica de la empresa para la que trabajo me impide desvelar cualquier tipo de información que pueda ser comprometedora...

De todas maneras, comentar que he conseguido hacer que todo funcione. La solución ha sido cambiar el lugar donde se llamaba a la función de borrado, en vez de en el div "dummy", la he puesto en los div que crean el "dummy". Ahora tienen el evento OnClick (que modifica "dummy" para que de la sensación que cambia el div pinchado) y el evento onMouseOver (que destruye el div "dummy").

De nuevo gracias a todos por vuestro tiempo!
  #13 (permalink)  
Antiguo 15/06/2012, 12:59
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: saber si el mouse está fuera del div

Qué bueno que lo hayas solucionado. Una pena eso de la política de ocultar algo que en cuanto cuelgues de la web va a ser público.

Aunque un modelo simple, pelado y austero no pude comprometer a nadie.

Para que no quede el tema sin un aporte sobre cambiar capas con el movimiento del maus (ratón), dejo un código muy simple, que parpadea un poco, aunque para empezar creo que sirve.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>

<title></title>
<script type="text/javascript">
var essta;

function borra(T) {
essta = T;
T.style.visibility = "hidden";
document.title = essta.id;
}

function muestra(T) {
essta.style.visibility = "visible";
document.title = essta.id;
}
</script>

<style type="text/css">
#caja1, #caja2, #caja3, #caja4{ position: relative; width: 298px; height: 198px; 
background: yellow; overflow: hidden; border: 1px solid red; }

#caja3, #caja4{ top:-400px; left:300px; }

#r1, #c1, #r2, #c2, #r3, #c3, #r4, #c4{ position: absolute; top: 0; left: 0; width: 300px; 
height: 200px; background-color: lime; color: teal; font: bold 20px/120% serif; }

#c1, #c2, #c3, #c4{ background-color: silver; color: black; }

p{ margin-top: -400px; }
</style>
</head>
<body>
<h2>qwrtyuiop</h2>

<div id=caja1>
<div id=r1 onmouseout="muestra(this)"> Contenido Reemplazo 1. <br>
<a href="www.forosdelweb.com">Foros del Web.</a> </div>
<div id=c1 onmouseover="borra(this)"> Contenido Original 1.</div>
</div>

<div id=caja2>
<div id=r2 onmouseout="muestra(this)"> Contenido Reemplazo 2. <br>
<a href="www.forosdelweb.com">Foros del Web.</a> </div>
<div id=c2 onmouseover="borra(this)"> Contenido Original 2.</div>
</div>

<div id=caja3>
<div id=r3 onmouseout="muestra(this)"> Contenido Reemplazo 3. <br>
<a href="www.forosdelweb.com">Foros del Web.</a> </div>
<div id=c3 onmouseover="borra(this)"> Contenido Original 3.</div>
</div>

<div id=caja4>
<div id=r4 onmouseout="muestra(this)"> Contenido Reemplazo 4. <br>
<a href="www.forosdelweb.com">Foros del Web.</a> </div>
<div id=c4 onmouseover="borra(this)"> Contenido Original 4.</div>
</div>

<p>QWERTYUIOP</p>

</body>
</html>
Al final encontré un tema donde comentamos un poco de esto. Quedó bastante bien con algún debate sobre eventos y "contra-eventos". Ya que pasé, también lo linkeo

Problemas con onMouseOut

Etiquetas: fuera, funcion, mouse
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:04.