Gracias a JQuery podemos tener un control absoluto sobre el movimiento y las acciones realizadas con el ratón. Algunos de los eventos más importantes son:
- click(): se hace clic en un elemento.
- dblclick(): se hace doble clic en un elemento.
- hover(): controla el momento en el que el cursor del ratón entra en el área de un elemento y también cuándo sale de ella.
- mousedown(): el botón del ratón es presionado.
- mouseup(): el botón del ratón es levantado cuando éste se encuentra sobre un determinado elemento (aunque el botón no haya sido pulsado estando sobre él).
- mouseover() / mouseenter(): el ratón entra en el área de un elemento. El segundo de ellos no propaga el evento.
- mouseout() / mouseleave(): el ratón sal del área de un elemento. El segundo de ellos no propaga el evento.
Veamos un ejemplo:
<!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">
<head>
<title>InformaticaPC | eventos del mouse en JQuery I</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;}
#log { color:yellow;background-color:red; }
#div1 { float:left;height:80px;width:210px; }
#div2 { float:left;height:220px;width:300px;background-color:lightblue; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Definimos el evento 'click' al hacer clic en 'boton1'
$("#boton1").click(function(){
$("#log").text("Hiciste clic en el botón");
});
// Al hacer clic en 'boton2' se eliminará el evento de 'boton1'
$("#boton2").click(function(){
$("#boton1").unbind("click");
});
// Cuando el cursor entra en el área de la imagen
$("#img1").mouseover(function(){
$("#log").text("El cursor ha entrado en el área de la imagen");
});
// Cuando el cursor sale del área de la imagen
$("#img1").mouseout(function(){
$("#log").text("el cursor ha salido del área de la imagen");
});
// Definimos el evento 'mousedown' en 'div2'
$("#div2").mousedown(function(){
$("#log").text("Has pulsado el botón del ratón sobre 'div2'");
});
// Definimos el evento 'mouseup' en 'div2'
$("#div2").mouseup(function(){
$("#log").text("Acabas de soltar el botón del ratón sobre 'div2'");
});
// Definimos el evento 'dblclick' en 'div2'
$("#div2").dblclick(function(){
$("#log").text("Hiciste doble clic en el div");
});
});
</script>
</head>
<body>
<div id="log"> </div>
<input type="button" id="boton1" value="Haz clic" />
<input type="button" id="boton2" value="Haz clic para eliminar el evento del otro botón" />
<p>Pasa el cursor del botón sobre la imagen</p>
<div id="div1"><img id="img1" src="logo.jpg" alt="" /></div>
<div id="div2">
Este es un 'div' con id 'div2'.<p />
* Haz clic aquí y mantén pulsado el ratón durante un par de segundos. Después levántalo.<br />
* A continuación haz clic sobre una parte vacía de la página y mateniendo pulsado el botón
arrástralo hacia aquí y suéltalo luego.<br />
* Después continuación haz doble clic sobre este div.<p />
Observa los mensajes que recibes en cada caso.
</div>
</body>
</html>
Aparte de los métodos mouseover() y mouseout() vistos en el ejemplo anterior disponemos también de mouseenter() y mouseleave(), que como hemos indicado anteriormente no propagan el evento.
Para que lo entiendas, digamos que cuando aplicamos los eventos mouseenter() y mouseleave() a un elemento que a su vez contiene a otros se estaría 'escuchando' sobre el conjunto de ellos, mientras que cuando usamos mouseover() y mouseout() el evento se lanzaría también para cada uno de los que haya en el contenedor.
Por ejemplo si usamos mouseenter() en un <div> que contiene una imagen, el evento se produciría cuando accedamos a él (ya sea a través de la imagen o de una parte vacía del mismo), no repitiéndose si luego lo movemos entre la imagen que contiene y la parte vacía de contenido.
Sin embargo, de utilizar mouseover() el evento se volvería a producir cada vez que alternásemos entre la imagen que contiene y su parte vacía.
Veamos un ejemplo de ello:
<!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">
<head>
<title>InformaticaPC | eventos del mouse en JQuery II</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;}
#div1, #div2 { float:left;height:120px;width:150px;margin:0px 40px 0px 40px; }
#div1 { background-color:lightgreen; }
#div2 { background-color:lightblue; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Se procesará sólo cuando el cursor entre por cualquier parte del área de 'div1'
$("#div1").mouseenter(function(){
alert("entro en 'div1'");
});
// Se procesará cuando el cursor entre por cualquier parte del área de 'div2',
// y cuando desde dentro de él se entre y salga de la imagen que contiene
$("#div2").mouseover(function(){
alert("entro en 'div2'");
});
});
</script>
</head>
<body>
<p>Entra en el área de cada 'div' y luego mueve el cursor sobre la imagen que contiene.</p>
<div id="div1"><img id="img1" src="logo.jpg" alt="" /></div>
<div id="div2"><img id="img2" src="logo.jpg" alt="" /></div>
</body>
</html>
Otro método útil es hover(), que nos permite definir acciones a realizar cuando se pase el cursor del ratón sobre el área de un elemento y también cuando se salga de él (tal y como si combinásemos los métodos explicados anteriormente).
<!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">
<head>
<title>InformaticaPC | eventos del mouse en JQuery III</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background-color:lightyellow;}
#div1 { height:100px;width:100px;background-color:lightgreen; }
</style>
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
// Observa que para hacer el código más legible, en lugar de crear
// la función dentro del método las creamos aparte e indicamos sus nombres
$("#div1").hover(entra, sale);
// ----------------
// Al entrar en el área de 'div1'
function entra() {
$("#div1").css("background-color","blue");
}
// ----------------
// Al salir del área de 'div1'
function sale() {
$("#div1").css("background-color","lightgreen");
}
});
</script>
</head>
<body>
<p>Mueve el cursor sobre el 'div' y sal luego de él</p>
<div id="div1"> </div>
</body>
</html>
Vea también: [ Eventos ] - [ Objeto Event ] - [ Eventos del ratón ]
Vea también: [ click() ] - [ dblclick() ] - [ mouseover() ] - [ mouseout() ] - [ mouseenter() ] - [ mouseleave() ] - [ hover() ]
