El evento onmousedown se dispara cuando presionamos alguno de los botones del mouse y el evento onmouseup 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.
pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
</head>
<body>
<table border="1">
<tr>
<td onmousedown="presionar(this)" onmouseup="levantar(this)">Recuadro 1</td>
<td onmousedown="presionar(this)" onmouseup="levantar(this)">Recuadro 2</td>
</tr>
</table>
<script src="funciones.js"></script>
</body>
</html>
funciones.js
function presionar(objeto) {
objeto.style.backgroundColor = '#ff0'
}
function levantar(objeto) {
objeto.style.backgroundColor = '#fff'
}
Es importante notar que a cada elemento td inicializamos los eventos onmousedown y onmouseup:
<td onmousedown="presionar(this)" onmouseup="levantar(this)">
Recordemos que la palabra this significa pasar la referencia del objeto que emitió el evento.
Luego en cada función accedemos a la propiedad style y de esta a la propiedad backgroundColor:
objeto.style.backgroundColor='#ff0';