เหตุการณ์ onmouseup: รันสคริปตเมื่อปล่อยปุ่มเมาส์บนองค์ประกอบ

เหตุการณ์ onmouseup จะทำงานเมื่อผู้ใช้ปล่อยปุ่มเมาส์ขณะที่เคอร์เซอร์อยู่เหนือองค์ประกอบ HTML นี้ มักใช้ร่วมกับ onmousedown เพื่อสร้างเอฟเฟกต์การคลิก

ตัวอย่างการใช้งาน

ตัวอย่างเปลี่ยนสีข้อความเมื่อกดและปล่อยเมาส์:

<!DOCTYPE html>
<html>
<body>
    <h3 id="myid" onmousedown="mouseDown()" onmouseup="mouseUp()">
        นี่คือหัวข้อตัวอย่าง
    </h3>
    <p>คลิกที่ข้อความด้านบนแล้วปล่อยเมาส์</p>
    <script>
        function mouseDown() {
            document.getElementById("myid").style.color = "yellow";
        }
        function mouseUp() {
            document.getElementById("myid").style.color = "blue";
        }
    </script>
</body>
</html>

ลำดับเหตุการณ์เมาส์

1. onmousedown - กดปุ่มเมาส์
2. onmouseup - ปล่อยปุ่มเมาส์
3. onclick - คลิกสมบูรณ์ (mousedown + mouseup บนองค์ประกอบเดียวกัน)