Categorías: jQuery

jQuery mouseup() y mousedown(): Detectar los clicks del ratón o touchpad

Nuevo post de jQuery donde vamos a repasar las las funciones mouseup() y mousedown(), estas funciones detectan la presión del click izquierdo del ratón y la finalización de la presión.

Otras funciones interesantes para trabajar con eventos del ratón son: mousemove() y mouseover() – mouseout().

mouseup() y mousedown() también tienen su equivalente con la detección de las teclas del teclado, estas son keyup() y keydown().

Sintaxis de jQuery mousedown()

Vamos a ver la sintaxis de esta función extraída de su web oficial:

$(selector).mousedown(funcion)

Os explico los parámetros:

selector (Obligatorio): Elemento donde queremos controlar las presiones del click izquierdo.
funcion (Opcional): Función callback a ejecutar al detectar la presión.

Sintaxis de jQuery mouseup()

Vamos a ver la sintaxis de esta función extraída de su web oficial:

$(selector).mouseup(funcion)

Os explico los parámetros:

selector (Obligatorio): Elemento donde queremos controlar la finalización del click izquierdo.
funcion (Opcional): Función callback a ejecutar.

Ejemplos de jQuery mousedown() y mouseup()

Vamos a ver en este ejemplo las 2 funciones en acción:

$(document).ready(function(){
   $("#prueba").mouseup(function(){
        $('#mensaje').text("Dejaste de presionar el click izquierdo");
    });
    $("#prueba").mousedown(function(){
        $('#mensaje').text("Has presionado el click izquierdo");
    });
});

Os explico el código del ejemplo:

En la primera condición detectamos la finalización del click izquierdo sobre el elemento con id = ‘prueba’.
Y sacamos un mensaje con la función text en el elemento con id= ‘mensaje’.
En la segunda condición detectamos la la presión del click izquierdo sobre el elemento con id = ‘prueba’.
Y sacamos un mensaje con la función text en el elemento con id= ‘mensaje’.

El código HTML del recuadro y párrafo es el siguiente:

<p><span id="mensaje">Haz click izquierdo en el recuadro</span></p>

<p><div id="prueba" style="height:100px; width:250px; background-color:#C3C3C3; padding:50px 50px 50px 50px;"></div></p>