เมธอด HTML DOM click()

เมธอด HTML DOM click() จำลองการคลิกเมาส์บนองค์ประกอบ สามารถใช้เพื่อคลิกบนองค์ประกอบใดๆ ได้เหมือนผู้ใช้ทำ ใช้เพื่อยิงเหตุการณ์ click ขององค์ประกอบ เหตุการณ์ click ทำการ event bubbling คือจะเรียกใช้เหตุการณ์ click ของพาเรนท์ทั้งหมดด้วย

ไวยากรณ์

ไวยากรณ์ของเมธอด HTML DOM click() ดังนี้ -

HTMLElementObject.click()

ตัวอย่าง

ลองดูตัวอย่างสำหรับเมธอด click() -

<!DOCTYPE html> <html> <body> <p>วางเมาส์เหนือปุ่มไรโดเพื่อจำลองการคลิกเมาส์</p> <form> <label>Radio <input type="radio" id="myRadio" name="choice" onmouseover="clickFunction()"></label> </form> <p id="Sample"></p> <script> function clickFunction() { document.getElementById("myRadio").click(); document.getElementById("Sample").innerHTML = "Radio button has been clicked on mouse hover"; } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมื่อวางเมาส์เหนือปุ่มไรโด -

เราสร้างปุ่มไรโดพร้อมป้ายกำกับภายในฟอร์มและให้ id "myRadio" ปุ่มนี้เมื่อวางเมาส์จะเรียกใช้ clickFunction() -

<label>Radio <input type="radio" id="myRadio" name="choice" onmouseover="clickFunction()"></label>

ฟังก์ชัน clickFunction() ใช้ getElementById() ดึงปุ่มไรโดและเรียกใช้เมธอด click() ของมัน จะทำให้ปุ่มไรโดถูกเลือก หลังจากเลือกปุ่มไรโดแล้ว ข้อความสำเร็จจะแสดงในย่อหน้าที่มี id "Sample" โดยใช้คุณสมบัติ innerHTML -

function clickFunction() { document.getElementById("myRadio").click(); document.getElementById("Sample").innerHTML = "Radio button has been clicked on mouse hover"; }