Eventos mousedown y mouseup en jQuery

Eventos mousedown y mouseup en jQuery

Eventos mousedown y mouseup en jQuery

En este tutorial veremos un caso práctico del uso de los eventos mousedown y mouseup. 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>

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