หน้าจอ
ชดเชยเมาส์จากมุมซ้ายบนของหน้าจอจอภาพ
pagey
ออฟเซ็ตของเมาส์จากมุมซ้ายบนของหน้า (ค่าของมันจะไม่ได้รับผลกระทบจากแถบเลื่อน)
คุณสมบัตินี้ไม่ได้รับการสนับสนุนภายใต้ IE9
แต่คุณสามารถเขียนโค้ดเพื่อคำนวณได้ การใช้งานใน jQuery:
การคัดลอกรหัสมีดังนี้:
// คำนวณ PAGEX/Y หากหายไปและมี clientx/y
if (event.pagex == null && original.clientx! = null) {
EventDoc = Event.target.OwnerDocument || เอกสาร;
DOC = EventDoc.DocumentElement;
Body = EventDoc.body;
event.pagex = original.clientx + (doc && doc.scrollleft || body && body.scrollleft || 0) - (doc && doc.clientleft ||| body && body.clientleft || 0);
Event.pagey = Original.clienty + (doc && doc.scrolltop || body && body.scrolltop || 0) - (doc && doc.clienttop || body && body.clienttop || 0);
-
เพียงแค่ใช้มันง่ายๆ
ออฟเซ็ตของเมาส์เมื่อเทียบกับวิวพอร์ตของเบราว์เซอร์รวมถึงความสูงที่ซ่อนอยู่ของแถบเลื่อนของเอกสารลบลูกค้าของเอกสาร
การคัดลอกรหัสมีดังนี้:
var pagey = event.clienty +document.documentelement Scrolltop-Document.documentElement.ClientTop
ทำไมต้องลบ document.documentelement.clienttop
นี่คือชดเชยของเอกสารเฉพาะเบราว์เซอร์ภายใต้ IE8 แม้ว่า HTML จะถูกตั้งค่าเป็น 0 การขยายและระยะขอบของร่างกายจะไม่ส่งผลกระทบต่อคุณค่าของมัน
ทดสอบภายใต้ IE7 รับ
การคัดลอกรหัสมีดังนี้:
document.documentelement.clienttop -> 2px document.documentelement.clientleft -> 2px
document.bocy.clienttop -> 0px document.body.clientleft -> 0px
มีลูกค้า
การชดเชยเมาส์จากมุมซ้ายบนของวิวัฒนาการของเบราว์เซอร์
ให้ความสนใจกับความแตกต่างระหว่างลูกค้าและ Pagey ค่าของลูกค้าเทียบเท่ากับ Pagey เมื่อไม่มีแถบเลื่อนบนหน้า
------------------------------ การแบ่งส่วน -------------------------------------------
การเลียนแบบ
หากรูปแบบตำแหน่งขององค์ประกอบไม่ใช่แบบคงที่เริ่มต้นเราบอกว่าองค์ประกอบนี้มีคุณสมบัติการวางตำแหน่ง
ค้นหาองค์ประกอบที่ใกล้เคียงที่สุดพร้อมแอตทริบิวต์การวางตำแหน่งในองค์ประกอบที่ปัจจุบันกระตุ้นเหตุการณ์เมาส์และองค์ประกอบบรรพบุรุษของมันคำนวณค่าชดเชยของเมาส์จากมันเพื่อค้นหาจุดทางการทูตในมุมซ้ายบนของเส้นขอบขององค์ประกอบเป็นจุดสัมพัทธ์ หากไม่พบองค์ประกอบที่มีแอตทริบิวต์การวางตำแหน่งการชดเชยจะถูกคำนวณเมื่อเทียบกับหน้าปัจจุบันซึ่งเทียบเท่ากับ Pagey ในเวลานี้
แอตทริบิวต์นี้ไม่ได้รับการสนับสนุนภายใต้ IE9 แต่สามารถแทนที่ด้วยความไม่เหมือนใคร
อวกาศ
คุณสมบัติเฉพาะ
ความแตกต่างระหว่างความยาวและเลเยอร์คือเมื่อคำนวณค่าออฟเซ็ตอดีตนั้นสัมพันธ์กับจุดตัดกันด้านในที่มุมซ้ายบนของเส้นขอบขององค์ประกอบ ดังนั้นเมื่อเมาส์อยู่บนเส้นขอบขององค์ประกอบค่าออฟเซ็ตจะเป็นค่าลบ นอกจากนี้ความไม่สนใจไม่สนใจว่าองค์ประกอบที่กระตุ้นให้เกิดเหตุการณ์มีคุณสมบัติการวางตำแหน่งหรือไม่ มันจะคำนวณค่าออฟเซ็ตที่สัมพันธ์กับองค์ประกอบที่กระตุ้นเหตุการณ์เสมอ
เมื่อพิจารณาถึงความแตกต่างระหว่างเลเยอร์และความสำคัญคุณควรให้ความสนใจกับการใช้งานที่เข้ากันได้สองอย่าง
1. องค์ประกอบที่ทริกเกอร์เหตุการณ์จะต้องตั้งค่าแอตทริบิวต์การวางตำแหน่ง
2. เมื่อองค์ประกอบมีขอบด้านบนชั้นบนเลเยอร์จะมีค่าความกว้างของชายแดนมากกว่าหนึ่งค่ามากกว่าค่าของ Offsety
การคัดลอกรหัสมีดังนี้:
// element.borderTopWidth ที่นี่จะต้องเป็นความกว้างของเส้นขอบด้านบนขององค์ประกอบที่คำนวณได้จริง
var borderTopWidth = window.getComputedStyle? window.getComputedStyle (องค์ประกอบ, null) .BorderTopWidth: element.currentstyle.BorderTopWidth;
var Offsety = event.offsety || (Event.layery + BorderTopWidth);
ผ่านคุณสมบัติแบบเลเยอร์และความสำคัญอย่างยิ่งมันสะดวกมากในการคำนวณการชดเชยของเมาส์ที่สัมพันธ์กับองค์ประกอบเหตุการณ์เมาส์ที่ถูกผูกไว้ซึ่งมีประโยชน์มากในบางครั้ง
ที่นี่เราพูดถึงแอตทริบิวต์ออฟเซ็ตของทิศทางแนวตั้งของเมาส์ ออฟเซ็ตในทิศทางแนวนอนนั้นคล้ายกันดังนั้นเราจะไม่พูดคุยกันอีกต่อไป
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่าคุณจะชอบมัน