Thuộc tính sự kiện onmouseup trong HTML

Thuộc tính sự kiện onmouseup kích hoạt khi người dùng thả nút chuột sau khi đã nhấn xuống trên một phần tử.

Cú pháp

<tagname onmouseup="script"></tagname>

Ví dụ

Cùng ví dụ với onmousedown (xem bài trước) - cặp nhấn/thả:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; height: 100vh; background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%); text-align: center; }
  .circle { background: #db133a; height: 150px; width: 150px; border-radius: 50%; margin: 10px auto; transition: transform 0.1s; }
  p { margin: 30px auto; }
</style>
</head>
<body>
<h1>Demo onmouseup</h1>
<div class="circle" onmousedown="mouseDown()" onmouseup="mouseUp()"></div>
<p>Nhấn và thả chuột trên vòng tròn đỏ</p>
<script>
  function mouseDown() {
    document.querySelector('.circle').style.transform = 'scale(0.8)';
  }
  function mouseUp() {
    document.querySelector('.circle').style.transform = 'scale(1.1)';
    setTimeout(() => document.querySelector('.circle').style.transform = 'scale(1)', 100);
  }
</script>
</body>
</html>

Kết quả

Nhấn giữ → thu nhỏ. Thả ra → phóng to nhẹ rồi về bình thường (effect bounce).

Ứng dụng: Kết thúc drag-drop, xóa selection, game release action. Cặp mousedown/mouseup = chu trình click hoàn chỉnh.