Eventos mousedown y mouseup en jQuery

En este tutorial veremos un caso práctico del uso de los eventos mousedown y mouseup con jQuery. Lo que ocurre cuando hacemos click con el botón izquierdo del ratón y cuando lo soltamos.

 

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

 

Eventos mousedown() y mouseup()

 

Veamos un ejemplo sencillo

 

//Código del botón
<input type="button" class="claseBoton" style="border: 4px outset grey;" value="Botón"/>
<script>
  //Eventos
  $('.claseBoton').mousedown(function(){
    $('.claseBoton').css('border','4px inset grey');
  });
  $('.claseBoton').mouseup(function(){
    $('.claseBoton').css('border','4px outset grey');
  });
</script>

 

El resultado sería un botón con efecto de pulsación al hacer click.

 

Función callBack

 

Tambien podemos usar una función externa pasándola por parámetro al evento de esta manera

 

//Código del botón
<input type="button" class="claseBoton" style="border: 4px outset grey;" value="Botón"/>
<script>
  //Eventos
  $('.claseBoton').mousedown(pulsar);
  $('.claseBoton').mouseup(soltar);
  //Funciones
  function pulsar() {
    $('.claseBoton').css('border', '4px inset grey');
  }
  function soltar() {
    $('.claseBoton').css('border', '4px outset grey');
  }
</script>

Más tutoriales de jQuery

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

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