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:
1 |
$(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:
1 |
$(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:
1 2 3 4 5 6 7 8 |
$(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:
1 2 3 |
<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> |
Otras funciones para detectar los eventos del ratón
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: