MouseEvent clientXคุณสมบัติ
ตัวอย่าง
ส่งออกพิกัดของตัวชี้เมาส์เมื่อคลิกปุ่มเมาส์บนองค์ประกอบ:
var x = event.clientX; // Get the horizontal coordinate
var y = event.clientY; // Get the vertical coordinate
var coor = "X coords: " + x + ", Y coords: " + y;
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ clientX ส่งกลับพิกัดแนวนอน (ตามพื้นที่ไคลเอนต์) ของตัวชี้เมาส์เมื่อเหตุการณ์ของเมาส์ถูกทริกเกอร์
พื้นที่ไคลเอนต์เป็นหน้าต่างปัจจุบัน
เคล็ดลับ:ในการรับพิกัดแนวตั้ง (ตามพื้นที่ไคลเอนต์) ของตัวชี้เมาส์ ให้ใช้คุณสมบัติclientY
หมายเหตุ:คุณสมบัตินี้เป็นแบบอ่านอย่างเดียว
รองรับเบราว์เซอร์
Property | |||||
---|---|---|---|---|---|
clientX | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
event.clientX
รายละเอียดทางเทคนิค
คืนมูลค่า: | ตัวเลข แทนพิกัดแนวนอนของตัวชี้เมาส์ หน่วยเป็นพิกเซล |
---|---|
รุ่น DOM: | กิจกรรม DOM ระดับ 2 |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
แสดงพิกัดของตัวชี้เมาส์ในขณะที่ตัวชี้เมาส์เคลื่อนที่เหนือองค์ประกอบ:
var x = event.clientX;
var y = event.clientY;
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;
ตัวอย่าง
การสาธิตความแตกต่างระหว่าง clientX และ clientY และ screenX และ screenY:
var cX = event.clientX;
var sX = event.screenX;
var cY = event.clientY;
var sY = event.screenY;
var coords1 = "client - X: " + cX + ", Y coords: " + cY;
var coords2 = "screen - X: " + sX + ", Y coords: " + sY;
หน้าที่เกี่ยวข้อง
การอ้างอิง HTML DOM: ไคลเอนต์ MouseEventY คุณสมบัติ
การอ้างอิง HTML DOM: MouseEvent screenX Property
การอ้างอิง HTML DOM: MouseEvent screenY Property
การอ้างอิง HTML DOM: คุณสมบัติ MouseEvent offsetX
การอ้างอิง HTML DOM: MouseEvent offsetY Property