El Atributo ONMOUSEDOWN

Es un evento HTML que se dispara cuando el usuario presiona cualquier botón del mouse sobre un elemento.

El atributo onmousedown es un evento HTML que se dispara cuando el usuario presiona cualquier botón del mouse sobre un elemento. A diferencia de onclick, que requiere soltar el botón, este evento se activa inmediatamente al presionar.

Sintaxis Básica

<elemento onmousedown="funcion()">

  • elemento: Cualquier elemento HTML (botones, divs, imágenes).

  • funcion(): Código JavaScript a ejecutar.

Ejemplos Prácticos

Ejemplo 1: Alerta al presionar

<button onmousedown="alert('¡Presionado!')">Presiona</button>

Resultado: Muestra una alerta inmediatamente al presionar el botón.

Ejemplo 2: Cambio de color interactivo

<div 
    onmousedown="this.style.backgroundColor = 'red'" 
    onmouseup="this.style.backgroundColor = 'white'"
>
    Presiona aquí
</div>

Funcionamiento: Cambia a rojo al presionar y vuelve a blanco al soltar.

Ejemplo 3: Contador progresivo

let contador = 0;
let intervalo;

elemento.onmousedown = () => {
    intervalo = setInterval(() => {
        contador++;
        actualizarContador();
    }, 100);
};

elemento.onmouseup = () => clearInterval(intervalo);

Efecto: Incrementa un número rápidamente mientras se mantiene presionado.

Ejemplo 4: Detectar botón específico

<div onmousedown="detectarBoton(event)">Clic aquí</div>

<script>
function detectarBoton(e) {
    if (e.button === 0) console.log("Botón izquierdo");
    if (e.button === 2) console.log("Botón derecho");
}
</script>

Evento: Usa event.button para identificar el botón (0: izquierdo, 2: derecho).

Buenas Prácticas

  1. Combina eventos: Usa onmouseup o onmouseleave para resetear acciones.

  2. Accesibilidad: Proporciona alternativas de teclado (onkeydown).

  3. Bloquea el menú contextual (para clic derecho):

elemento.oncontextmenu = () => false;

Casos de Uso Comunes

  • Juegos (disparar al mantener presionado).

  • Menús contextuales personalizados.

  • Selección de texto o arrastre de elementos.

  • Efectos visuales interactivos.

Compatibilidad

Todos los navegadores modernos (Chrome, Firefox, Safari, Edge).

Alternativa moderna:

elemento.addEventListener('mousedown', funcion);

Conclusión

El atributo onmousedown es esencial para crear interacciones fluidas y receptivas. Experimenta combinándolo con otros eventos del mouse para crear experiencias únicas.

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Tutorial: Uso del atributo "onmousedown" en HTML</title>
    <style>
        .caja {
            width: 150px;
            height: 150px;
            background-color: #f0f0f0;
            margin: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #contador {
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }
    </style>
</head>
<body>
    <h1>Tutorial del atributo <code>onmousedown</code></h1>

    <!-- Ejemplo 1: Detección básica -->
    <h2>1. Detección básica de clic</h2>
    <button onmousedown="alert('¡Botón presionado!')">Haz clic aquí</button>

    <!-- Ejemplo 2: Cambio de color -->
    <h2>2. Cambio dinámico de color</h2>
    <div 
        class="caja" 
        onmousedown="this.style.backgroundColor = '#e74c3c'" 
        onmouseup="this.style.backgroundColor = '#f0f0f0'"
    >
        Presiona aquí
    </div>

    <!-- Ejemplo 3: Contador progresivo -->
    <h2>3. Contador mientras se mantiene presionado</h2>
    <div class="caja" id="areaContador">
        <div id="contador">0</div>
    </div>

    <!-- Ejemplo 4: Detección de botón del mouse -->
    <h2>4. ¿Qué botón se presionó?</h2>
    <div 
        class="caja"
        onmousedown="mostrarBoton(event)"
    >
        Click derecho/izquierdo
    </div>
    <p id="botonInfo"></p>

    <script>
        // Ejemplo 3: Contador progresivo
        let contador = 0;
        let intervalo;

        document.getElementById("areaContador").onmousedown = function() {
            intervalo = setInterval(() => {
                contador++;
                document.getElementById("contador").textContent = contador;
            }, 100);
        };

        document.getElementById("areaContador").onmouseup = function() {
            clearInterval(intervalo);
        };

        // Ejemplo 4: Detectar botón presionado
        function mostrarBoton(evento) {
            const info = document.getElementById("botonInfo");
            let mensaje;
            
            switch(evento.button) {
                case 0:
                    mensaje = "Botón izquierdo ????️";
                    break;
                case 1:
                    mensaje = "Botón del medio ????️";
                    break;
                case 2:
                    mensaje = "Botón derecho ????️";
                    break;
                default:
                    mensaje = "Botón desconocido";
            }
            
            info.textContent = mensaje;
        }
    </script>
</body>
</html>

 

<!-- Ejemplo Final: Arrastrar elemento -->
<div 
    id="arrastrable"
    style="position: absolute; cursor: move;"
    onmousedown="iniciarArrastre(event)"
>
    Arrástrame
</div>

<script>
function iniciarArrastre(e) {
    e.target.style.left = e.clientX + 'px';
    e.target.style.top = e.clientY + 'px';
}
</script>