 |
Eventos mousedown y mouseup en jQuery
Método mousedown ()
El evento de mousedown ocurre cuando se presiona el botón izquierdo del mouse sobre el elemento seleccionado.
El método mousedown () activa el evento mousedown o adjunta una función para que se ejecute cuando ocurre un evento mousedown.
Consejo: este método se suele utilizar junto con el método mouseup () .
Método mousedown ()
El evento mouseup ocurre cuando se suelta el botón izquierdo del mouse sobre el elemento seleccionado. El método mouseup () activa el evento mouseup o adjunta una función para que se ejecute cuando ocurre un evento mouseup.
Consejo: este método se suele utilizar junto con el método mousedown () .
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div").mouseup(function(){
$(this).after("<p style='color:red;'>Boton del mouse suelto..</p>");
});
$("div").mousedown(function(){
$(this).after("<p style='color:gold;'>Boton del mouse presionado.</p>");
});
});
</script>
</head>
<body>
<div>Presione y suelte el boton del mouse sobre este elemento div.</div>
</body>
</html>
Implementemos una página que contenga una tabla con una fila y dos columna, al presionar el botón del mouse dentro de una casilla de la tabla cambiar el color de fondo de la misma por amarillo y cuando levantamos el dedo del mouse regresar a color blanco la casilla.
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1">
<tr>
<td>1111111111</td>
<td>1111111111</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func15.js"></script>
</body>
</html>
funci15.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("td");
x.mousedown(presionaMouse);
x.mouseup(sueltaMouse);
}
function presionaMouse() {
$(this).css("background-color", "salmon");
}
function sueltaMouse() {
$(this).css("background-color", "gold");
}
Primero asociamos los eventos mousedown y mouseup a todos los elementos td del documento:
let x = $("td");
x.mousedown(presionaMouse);
x.mouseup(sueltaMouse);
Cuando se presiona algún botón del mouse dentro de una celda de la tabla se dispara la función:
function presionaMouse() {
$(this).css("background-color", "salmon");
}
De forma similar cuando se suelta el botón del mouse se dispara la función:
function sueltaMouse() {
$(this).css("background-color", "gold");
}