El Atributo ONMOUSEUP

El atributo onmouseup es un evento HTML que se dispara cuando el usuario libera un botón del mouse sobre un elemento. Es esencial para crear interacciones que requieren acciones al soltar clics, como arrastrar elementos o sistemas de dibujo.

Sintaxis Básica

<elemento onmouseup="funcion(event)">

• elemento: Cualquier elemento HTML (botones, divs, canvas).

• event: Objeto del evento con información como posición y botón pulsado.

Ejemplos Prácticos

Ejemplo 1: Botón con efecto de presión

<button 
    onmousedown="this.style.transform = 'scale(0.9)'"
    onmouseup="this.style.transform = 'scale(1)'"
>
    Click aquí
</button>

Efecto: El botón se encoge al presionar y recupera su tamaño al soltar.

Ejemplo 2: Sistema de arrastrar y soltar

CSS:

let arrastrando = false;

function iniciarArrastre(e) {
    arrastrando = true;
    // Lógica de posición inicial
}

JavaScript:

elemento.onmouseup = () => arrastrando = false;

Uso clave: Combinar con onmousedown y onmousemove para arrastre fluido.

Ejemplo 3: Lienzo de dibujo

let dibujando = false;

canvas.onmousedown = () => dibujando = true;
canvas.onmouseup = () => dibujando = false;
canvas.onmousemove = (e) => {
    if (dibujando) {
        // Dibujar líneas
    }
};

Nota: Permite dibujar solo mientras se mantiene presionado el clic.

Ejemplo 4: Detectar botón específico

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

Dato útil: event.button identifica el botón (0: izquierdo, 2: derecho).

Diferencias Clave

onmouseup vs onclick:

• onmouseup: Se dispara al soltar el botón, independientemente de dónde se presionó.

• onclick: Requiere que ambos eventos (mousedown y mouseup) ocurran en el mismo elemento.

Buenas Prácticas

Combina con otros eventos:

elemento.onmousedown = iniciarAccion;
elemento.onmouseup = finalizarAccion;

Limpia recursos:

document.onmouseup = () => {
    detenerAnimaciones();
    liberarRecursos();
};

Maneja el contexto:

elemento.onmouseup = (e) => {
    e.preventDefault(); // Evita comportamientos predeterminados
};

Casos de Uso Avanzados

• Juegos de disparos: Liberar proyectiles al soltar el botón

• Slider interactivo: Confirmar selección al soltar el clic

• Edición de imágenes: Aplicar filtros al terminar de seleccionar áreas

• Formularios: Validar campos al soltar clic en botones

Compatibilidad

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

Alternativa moderna:

elemento.addEventListener('mouseup', funcion);

Conclusión

El atributo onmouseup es fundamental para crear interfaces precisas y responsivas. Al dominar su uso junto con otros eventos del mouse, podrás desarrollar desde simples efectos hasta complejas herramientas interactivas.

<!-- Ejemplo Final: Selector de color personalizado -->
<div 
    id="selectorColor"
    style="width: 200px; height: 50px; background: linear-gradient(to right, red, yellow, lime, blue);"
    onmousedown="iniciarSeleccion(event)"
    onmouseup="mostrarColorSeleccionado(event)"
></div>
<p id="colorHex">#FFFFFF</p>

<script>
function iniciarSeleccion(e) {
    // Lógica para seguimiento durante el arrastre
}

function mostrarColorSeleccionado(e) {
    const color = calcularColor(e.offsetX);
    document.getElementById("colorHex").textContent = color;
}
</script>