JavaScript ไม่มีวัตถุเมาส์และขึ้นอยู่กับวัตถุเหตุการณ์ที่มีประสิทธิภาพเพื่อให้ได้พิกัดเมาส์
โดยการฟัง mousemove ของเอกสารเราสามารถรับตำแหน่งเมาส์แบบเรียลไทม์
แต่! - มีคุณลักษณะมากมายที่เกี่ยวข้องกับเมาส์ในเหตุการณ์ซึ่งน่าตื่นเต้นมาก! ดังนี้:
| Event.layerx | Event.layery |
| Event.Clientx | Event.Clienty |
| Event.pagex | Event.pagey |
| Event.offsetx | Event.offsety |
| Event.screenx | Event.screeny |
| Event.x | เหตุการณ์. |
รวม 6 กลุ่ม!
ยิ่งกว่านั้นความแตกต่างของพวกเขาไม่ชัดเจนและเบราว์เซอร์ไม่เข้ากันได้!
วัตถุประสงค์ของบทความนี้คือการชี้แจงความแตกต่างและเลือกสิ่งที่ไม่แนะนำ
รหัสทดสอบ
เรียกใช้รหัสต่อไปนี้โดยตรง:
การคัดลอกรหัสมีดังนี้:
<! doctype html> <br />
<html xmlns = "http://www.w3.org/1999/xhtml"> <br/>
<head> <br />
<meta charset = "utf-8" /> </p>
<style>
ร่างกาย {ตำแหน่ง: ญาติ;}
div {min-height: 300px; พื้นหลังสี: #eee;}
#jg {ขวา: 0; ด้านบน: 10px; ตำแหน่ง: แก้ไข; พื้นหลังสี: #f00;}
</style>
<p> </head> <br />
<body> <br />
<span id = "jg"> แสดงผลลัพธ์ </span> <br />
<input type = "button" value = "ปุ่ม A" /> </p>
<div> div ในหน้าจอ </div>
<div style = "ความสูง: 1000px; ความกว้าง: 2000px; พื้นหลัง: #DDD;"> สูงมากและกว้าง - - </div>
<div> div div </div> นอกจอ </div>
<p> </body> <br />
<script>
var jg = document.getElementById ('jg');
document.onmousemove = function (e) {
E = E || window.event;
jg.innerhtml = 'layerx:'+e.layerx+
', layery:'+e.layery+
', <br/> clientx:'+e.clientx+
', clienty:'+e.clienty+
', <br/> pagex:'+e.pagex+
', pagey:'+e.pagey+
', <br/> Offsetx:'+e.offsetx+
', untsety:'+e.offsety+
', <br/> screenx:'+e.screenx+
', screeny:'+e.screeny+
', <br/> x:'+e.x+
', y:'+ey;
-
</script> <br />
</html>
ในระหว่างการทดสอบฉันพบเครื่องมือวิเศษ: Chrome (Google Chrome) และ IE9 เข้ากันได้กับแอตทริบิวต์ข้างต้นทั้งหมด! มันสะดวกมากที่จะเปรียบเทียบพวกเขา
หลังจากเปรียบเทียบผลลัพธ์มีดังนี้:
คำจำกัดความของแต่ละแอตทริบิวต์
clientx และ y เป็นพิกัดของเมาส์ที่สัมพันธ์กับวิวพกพาเบราว์เซอร์ (เช่นส่วนนอกแถบเลื่อนจะถูกละเว้น); เบราว์เซอร์ทั้งหมดรองรับ
ScreenX และ Y เป็นพิกัดของเมาส์เมื่อเทียบกับด้านซ้าย (ขอบบน) ของทั้งหน้าจอซึ่งโดยทั่วไปไม่ได้สัมผัสกับเอกสาร; มันเข้ากันได้อย่างสมบูรณ์
Offsetx และ Y เป็นพิกัดของเมาส์ที่สัมพันธ์กับวัตถุที่ชี้ไปที่ปัจจุบัน เมื่อเมาส์ชี้ไปที่ปุ่มในเวลานี้ Offsetx จะสัมพันธ์กับปุ่มนี้ Firefox ไม่รองรับ
X และ Y, Layerx และ Y ในเบราว์เซอร์มาตรฐานเดียวกันเป็นแอตทริบิวต์ที่สามารถใช้ในการแทนที่ Layerx ใน IE
PageX และ Y เป็นพิกัดของเมาส์ที่สัมพันธ์กับด้านซ้าย (ขอบบน) ของทั้งหน้ารวมถึงนอกวิวพอร์ต IE7 และ 8 ไม่สนับสนุน
ประเด็นสำคัญ: Layerx และ Layery
Layerx และ Y เป็นคุณลักษณะใหม่ที่ปล่อยออกมาจากเบราว์เซอร์มาตรฐานและ IE9 ยังรองรับพวกเขา เขาสามารถใช้แทน OffsetX และ Y อย่างไรก็ตามคำจำกัดความของเขาคือ: พิกัดขององค์ประกอบที่มีข้อมูลการวางตำแหน่งที่สัมพันธ์กับองค์ประกอบชี้ปัจจุบัน "ตำแหน่ง" นี้หมายถึงแอตทริบิวต์ CSS (เช่นไม่คงที่) ที่มีตำแหน่งที่ไม่ได้รับการกำหนดค่า
หากองค์ประกอบที่ชี้ในปัจจุบันอยู่ในตำแหน่ง Layerx และ Y จะส่งคืนพิกัดที่สัมพันธ์กับองค์ประกอบนี้ มิฉะนั้นตรวจสอบแท็กหลักขององค์ประกอบนี้ หากยังไม่มีการวางตำแหน่งให้ดำเนินการต่อ; จนกระทั่งองค์ประกอบรูท - โหนด HTML
ดังนั้นใน Firefox หากคุณต้องการค่าออฟเซ็ตคุณต้องเพิ่มข้อมูลตำแหน่ง!
สรุปความเข้ากันได้:
1. Firefox ไม่รองรับแอตทริบิวต์ Offsetx, Offsetx, Offsety และ X, Y แต่สามารถแทนที่ด้วย layerx;
2. x และ y ใน IE เทียบเท่ากับ layerx และ layery ใน Firefox & Chrome;
3. ขอบเขตของเอกสารของ IE7 และ 8 อยู่ห่างจากขอบเขตของหน้าต่างเบราว์เซอร์ 2px ดังนั้น ScreenX จึงมีระยะทางขั้นต่ำ 2px เมื่อหน้าต่างขยายใหญ่ที่สุด
4. แม้ว่า Layerx และ Y ใน IE9 มีค่า แต่ก็ไม่ถูกต้องอย่างลึกลับ ดูเหมือนว่าพวกเขาจะเกี่ยวข้องกับแท็ก HTML ตัวอย่างเช่นในรหัสตัวอย่างของฉันลากแถบเลื่อนไปทางขวาสุดและเมาส์จะค่อยๆเคลื่อนที่จากช่องว่างไปยัง Div ใหญ่ ในเวลานี้ความแตกต่างระหว่างด้านขวาสุดและขวาสุดของ Div แรกจะรวมอยู่ใน Layerx - - เนื่องจากมีองค์ประกอบมากขึ้นเรื่อย ๆ ในตอนท้ายยิ่งมีการคำนวณที่ซับซ้อนมากขึ้นเท่านั้น ในขณะที่ Layerx ของ Firefox และ Chrome ไม่มีปัญหานี้ ดังนั้นอย่าใช้ Layerx ใน IE9
5. ในโครเมี่ยมแม้ว่า X และ Y มีค่า แต่ก็เหมือนกับ ClientX และ Y! ดังนั้นจึงไม่แนะนำให้ใช้แอตทริบิวต์ X, Y
วิธีการรักษาความเข้ากันได้
ในเบราว์เซอร์มาตรฐานตำแหน่งและ event.layerx สามารถใช้เพื่อใช้แอตทริบิวต์ event.offsetx;
ไม่มี pagex หรือ pagey ใน IE7 คุณสามารถใช้ document.documentelement.scrollleft+event.clientx เพื่อค้นหา
ดังนั้นหนึ่งใน X, Y หรือ Offsetx และ Offsety ใน IE สามารถลบออกได้