Eventos: mousedown y mouseup

PROBLEMA

  1. Elaborar un programa que muestre un div de color rojo. Cuando se presione cambiar el color a amarillo y luego de soltar el botón del mouse volver a pintar de rojo.
Solución 
Problema 1.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
</head>

<body>

    <div style="width:200px;height:200px;background:#ff0000" id="recuadro1">
    </div>

    <script>
        document.getElementById('recuadro1').addEventListener('mousedown', presion1);
        document.getElementById('recuadro1').addEventListener('mouseup', presion2);

        function presion1() {
            document.getElementById('recuadro1').style.backgroundColor = '#ffff00';
        }

        function presion2() {
            document.getElementById('recuadro1').style.backgroundColor = '#ff0000';
        }
    </script>

</body>

</html>


Retornar al menu