Eventos de ratón en jQuery

Eventos de ratón en jQuery

Eventos de ratón en jQuery

En este tutorial aprenderemos cómo capturar eventos de ratón. Que tipos existen y cómo controlar el botón pulsado en cada momento.

Si no tienes todavía enlazado jQuery en tu proyecto puedes seguir nuestro tutorial Enlazar proyecto con jQuery

Eventos de ratón

En jQuery existen varios eventos relacionados con el ratón

  • click: Cuando se hace click en un elemento.
  • dblclick: Cuando se hace doble click en un elemento.
  • mousedown: Cuando se pulsa un botón del ratón.
  • mouseup: Cuando se suelta un botón del ratón que estaba pulsado.
  • mouseover: Cuando el cursor del ratón está sobre un elemento.
  • mouseout: Cuando el cursor sale de ese elemento.
  • hover: Cuando el cursor entra un elemento y cuando sale.

La manera más sencilla de crear un evento de ratón en jQuery es con el evento click

Veamos un ejemplo

<body>
  <!--Tenemos un botón en html-->
  <input type="button" id="refrescar" value="Refrescar página">
</body>
<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    //Creamos el evento click en el elemento con id = refrescar
    $('#refrescar').click(function(){
      //Al hacer click actualiza la página
      location.reload();
    });
  });
</script>

El resto de eventos de ratón se utilizan de la misma forma. Veamos un ejemplo práctico

<body>
  <!--Tenemos un párrafo con un borde de color negro-->
  <p id="texto" style="border: 2px solid black;">Esto es un párrafo</p>
</body>
<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    //Creamos el evento mouseover en el elemento con id = texto
    $('#texto').mouseover(function(){
      //Al poner el cursor encima cambia el borde a rojo
      $('#texto').css("border","2px solid red");
    });
    //Asimismo debemos crear el evento mouseout para que vuelva a ponerse negro
    $('#texto').mouseout(function(){ 
      //Al salir el cursor el borde vuelve a ser negro
      $('#texto').css("border","2px solid black"); 
    });
  });
</script>

¿Qué botón del ratón se ha pulsado?

Si lo que queremos es capturar qué botón del ratón se ha pulsado usaremos el evento mousedown.

Veamos un ejemplo

<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    //Creamos el evento mousedown en todo el body
    $('body').mousedown(function(evento){
      //Si el evento tiene el valor 1 se pulsó el botón izquierdo
      if(evento.which == 1){
        alert("Has pulsado el botón izquierdo");
      //Si es 2 significa que se ha pulsado el botón central
      } else if(evento.which == 2){
        alert("Has pulsado el botón central");
      //Si es 3 se ha pulsado el botón derecho
      } else if(evento.which == 3){
        alert("Has pulsado el botón derecho");
      }
    });
  });
</script>

De este modo podemos saber qué botón fue pulsado y realizar otras acciones.

Por ejemplo actualizar la página al pulsar el botón central

<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    //Creamos el evento mousedown en todo el body
    $('body').mousedown(function(evento){
      //Si se pulsón el botón central del ratón
      if(evento.which == 2){
        //Actualiza la página
        location.reload();
      } 
    });
  });
</script>

Podría haber muchos motivos por los que capturar eventos de ratón, en todo el body o en elementos concretos.

Veamos un último ejemplo

<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    //Creamos el evento mousedown en todo el body
    $('#pie').mousedown(function(evento){
      //Si se pulsón el botón derecho del ratón
      if(evento.which == 3){
        //Vuelve a la parte superior de la página lentamente
        $("html, body").animate({scrollTop:0}, "slow");
      } 
    });
  });
</script>

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas