แอตทริบิวต์เหตุการณ์ onmousedown ของ HTML

แอตทริบิวต์เหตุการณ์ onmousedown ของ HTML จะถูกกระตุ้นเมื่อปุ่มเมาส์ถูกกดลงบนองค์ประกอบ HTML ในเอกสาร HTML

ไวยากรณ์

ไวยากรณ์มีดังนี้ −

<tagname onmousedown="script"></tagname>

ลองดูตัวอย่างการใช้งานแอตทริบิวต์เหตุการณ์ onmousedown ของ HTML −

ตัวอย่าง

<!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;    }    p {       margin: 30px auto;    } </style> </head> <body> <h1>การสาธิตแอตทริบิวต์เหตุการณ์ onmousedown ของ HTML</h1> <div class="circle" onmousedown="mouseDownFn()" onmouseup="mouseUpFn()"></div> <p>ลองคลิกวงกลมสีแดงข้างต้น</p> <script>    function mouseDownFn() {       document.querySelector('.circle').style.transform = 'scale(0.5)';    }    function mouseUpFn() {       document.querySelector('.circle').style.transform = 'scale(1.2)';    } </script> </body> </html>

ผลลัพธ์

คลิกที่วงกลม สีแดง เพื่อสังเกตการทำงานของแอตทริบิวต์เหตุการณ์ onmousedown −