15 - Eventos mousedown y mouseup.

El evento mousedown se dispara cuando presionamos alguno de los botones del mouse y el evento mouseup cuando dejamos de presionar el botón.

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="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("td");
  x.mousedown(presionaMouse);
  x.mouseup(sueltaMouse);
}

function presionaMouse() {
  $(this).css("background-color", "#ff0");
}

function sueltaMouse() {
  $(this).css("background-color", "#fff");
}

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", "#ff0");
}

De forma similar cuando se suelta el botón del mouse se dispara la función:

function sueltaMouse() {
  $(this).css("background-color", "#fff");
}


Retornar