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

<html>
<head>
<title>Problema</title>
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>1111111111</td><td>1111111111</td>
</tr>
</table>
</body>
</html>

funciones.js

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

function inicializarEventos()
{
  var x;
  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:

  var x;
  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