ตัวแปร MouseEvent clientX

เหตุการณ์ DOM MouseEvent

การเรียกใช้และการประกาศ

เมื่อเหตุการณ์เมาส์ถูกกระตุ้น ตัวแปร clientX จะส่งกลับค่าตำแหน่งติดตายเมาส์ตรงนอกเมาส์ (ตามโซนลูกบอล)

โซนลูกบอลเป็นหน้าต่างปัจจุบัน

คำแนะนำ:เพื่อรับค่าตำแหน่งติดตายเมาส์ตรงด้านล่าง (ตามโซนลูกบอล) ใช้ 属性 clientY.

หมายเหตุ:ตัวแปรนี้เป็นรายการแสดงเฉพาะ

ตัวอย่าง

ตัวอย่าง 1

แสดงตำแหน่งติดตายเมาส์เมื่อคลิกทับปุ่มเมาส์บนองค์ประกอบ

var x = event.clientX;     // รับค่าตำแหน่งตั้งตารงตั้งต้น
var y = event.clientY;     // รับค่าตำแหน่งตั้งตารงตั้งต้น
var coor = "X coords: " + x + ", Y coords: " + y;

ลองด้วยตัวเอง

ตัวอย่าง 2

แสดงตำแหน่งติดตายเมาส์เมื่อเมาส์เคลื่อนที่บนองค์ประกอบ

var x = event.clientX;
var y = event.clientY; 
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coor;

ลองด้วยตัวเอง

ตัวอย่าง 3

แสดงให้เห็นความแตกต่างระหว่าง 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;

ลองด้วยตัวเอง

บทเขียน

event.clientX

รายละเอียดเทคนิค

ค่าที่ส่งกลับ: ค่าเลขาศัพท์เป็นตัวแทนตำแหน่งระยะทางของติดตายเมาส์ตรงนอกเมาส์เพียงไม่กี่เซนติเมตร
DOM ระดับ: DOM ระดับ 2 รายการเหตุ

浏览器支持

属性 Chrome IE Firefox Safari Opera
clientX การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน

หน้าที่เกี่ยวข้อง

คู่มือ HTML DOM:属性 clientY ของ MouseEvent

คู่มือ HTML DOM:属性 screenX ของ MouseEvent

คู่มือ HTML DOM:属性 screenY ของ MouseEvent

คู่มือ HTML DOM:属性 offsetX ของ MouseEvent

คู่มือ HTML DOM:属性 offsetY ของ MouseEvent

เหตุการณ์ DOM MouseEvent