ในการตั้งโปรแกรมการกระทำบางอย่างเพื่อตอบสนองต่อการเคลื่อนไหวของเคอร์เซอร์ในหน้าต่างเบราว์เซอร์ บางครั้งจำเป็นต้องกำหนดพิกัดของมัน ซึ่งสามารถทำได้โดยสคริปต์ที่มีความสามารถในการติดตามเหตุการณ์ที่เกิดขึ้นในเบราว์เซอร์ สคริปต์ JavaScript ฝั่งไคลเอ็นต์มีความสามารถนี้ ด้านล่างนี้จะอธิบายหนึ่งในตัวเลือกในการรับพิกัดของเคอร์เซอร์โดยใช้ความสามารถของภาษานี้
คำแนะนำ
ขั้นตอนที่ 1
ใช้คุณสมบัติของวัตถุเหตุการณ์เพื่อรับพิกัดปัจจุบันของเคอร์เซอร์ วัตถุนี้มีคุณสมบัติทั้งชุดที่เกี่ยวข้องกับการกำหนดพิกัดของเคอร์เซอร์ของเมาส์ คุณสมบัติ LayerX ประกอบด้วยระยะทางที่วัดเป็นพิกเซลจากขอบด้านซ้ายของเลเยอร์ปัจจุบัน และ LayerY - ระยะห่างเท่ากันจากขอบด้านบน คุณสมบัติทั้งสองนี้มีคำเหมือน - แทนที่จะเป็น event. LayerX คุณสามารถเขียน event.x และแทนที่จะเขียน event. LayerY คุณสามารถเขียน event.y คุณสมบัติ pageX และ pageY ถือพิกัดแนวนอนและแนวตั้งของเคอร์เซอร์ที่สัมพันธ์กับขอบซ้ายบนของหน้าต่างเบราว์เซอร์ และคุณสมบัติ screenX และ screenY มีค่าใกล้เคียงกันซึ่งสัมพันธ์กับหน้าจอมอนิเตอร์
ขั้นตอนที่ 2
เพิ่มการตรวจสอบประเภทเบราว์เซอร์ในโค้ดของคุณ และใช้คุณสมบัติ clientX และ clientY นอกเหนือจากคุณสมบัติด้านบนในอ็อบเจ็กต์เหตุการณ์ นี่เป็นสิ่งจำเป็นเนื่องจาก Microsoft ใช้การกำหนดคุณสมบัติที่แตกต่างกันในเบราว์เซอร์ Internet Explorer คุณสามารถรวมทั้งสองวิธีเข้าด้วยกันเพื่อกำหนดพิกัดได้ เช่น
ถ้า (evennt.pageX || evennt.pageY) {
CoordinatX = evevnt.pageX;
พิกัด Y = evevnt.pageY;
}
อื่น if (evennt.clientX || evevnt.clientY) {
CoordinatX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
CoordinatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
ขั้นตอนที่ 3
วางโค้ดนิยามพิกัดในฟังก์ชันแบบกำหนดเอง ตัวอย่างเช่น:
ฟังก์ชัน GetMouse (เหตุการณ์) {
varพิกัดX = 0, พิกัดY = 0;
ถ้า (! evevnt) evevnt = window.event;
ถ้า (evennt.pageX || evennt.pageY) {
CoordinatX = evevnt.pageX;
พิกัด Y = evevnt.pageY;
}
อื่นถ้า (evennt.clientX || evevnt.clientY) {
CoordinatX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
CoordinatY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
ส่งคืน {"coordX": CoordinatX, "coordY": CoordinatY};
}
ฟังก์ชันนี้ส่งคืนอาร์เรย์ขององค์ประกอบที่มีชื่อสององค์ประกอบ ตัวแรก (ด้วยคีย์ coordX) มีพิกัด X และตัวที่สอง (coordY) มีพิกัด Y
ขั้นตอนที่ 4
เรียกใช้ฟังก์ชันนี้ในบางเหตุการณ์ - ตัวอย่างเช่น ในเหตุการณ์การย้ายเมาส์ (onmousemove) ในบริบทของเอกสาร ตัวอย่างด้านล่างใช้ฟังก์ชันเพื่อส่งออกพิกัดของเมาส์ไปยังแถบสถานะ:
document.onmousemove = ฟังก์ชัน (เหตุการณ์) {var CurCoord = GetMouse (เหตุการณ์); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};