informaticaPC

Tutorial de JQuery

Eventos del ratón

Eventos del ratón

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>

Ejemplo

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>

Ejemplo

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>

Ejemplo

Más información

Vea también: [ Eventos ] - [ Objeto Event ] - [ Eventos del ratón ]

Más información

Vea también: [ click() ] - [ dblclick() ] - [ mouseover() ] - [ mouseout() ] - [ mouseenter() ] - [ mouseleave() ] - [ hover() ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso