อะไรคือความแตกต่างระหว่างscreenX/ Y, clientX/ YและpageX/ Y?
นอกจากนี้สำหรับ iPad Safari การคำนวณคล้ายกับบนเดสก์ท็อปหรือมีความแตกต่างเนื่องจากวิวพอร์ตหรือไม่
คงจะดีมากถ้าคุณชี้ให้ฉันเป็นตัวอย่าง
คำตอบ:
ใน JavaScript:
pageX, pageY, screenX, screenY, clientXและclientYส่งกลับจำนวนซึ่งบ่งชี้ว่าจำนวนกาย“พิกเซล CSS” จุดเป็นจุดอ้างอิงจากที่ จุดเหตุการณ์คือจุดที่ผู้ใช้คลิกจุดอ้างอิงคือจุดที่ด้านซ้ายบน คุณสมบัติเหล่านี้ส่งคืนระยะทางแนวนอนและแนวตั้งจากจุดอ้างอิงนั้น
pageXและpageY:
สัมพันธ์กับด้านบนซ้ายของพื้นที่เนื้อหาที่แสดงผลอย่างสมบูรณ์ในเบราว์เซอร์ จุดอ้างอิงนี้อยู่ด้านล่างแถบ URL และปุ่มย้อนกลับด้านซ้ายบน จุดนี้อาจอยู่ที่ใดก็ได้ในหน้าต่างเบราว์เซอร์และสามารถเปลี่ยนตำแหน่งได้จริงหากมีหน้าเลื่อนฝังอยู่ภายในหน้าเว็บและผู้ใช้ย้ายแถบเลื่อน
screenXและscreenY:
สัมพันธ์กับด้านบนซ้ายของหน้าจอทางกายภาพ / จอภาพจุดอ้างอิงนี้จะย้ายเฉพาะถ้าคุณเพิ่มหรือลดจำนวนจอภาพหรือความละเอียดของจอภาพ
clientXและclientY:
สัมพันธ์กับขอบด้านซ้ายบนของพื้นที่เนื้อหา ( วิวพอร์ต ) ของหน้าต่างเบราว์เซอร์ จุดนี้ไม่ย้ายแม้ว่าผู้ใช้จะย้ายแถบเลื่อนจากภายในเบราว์เซอร์
สำหรับภาพที่เบราว์เซอร์สนับสนุนคุณสมบัติ:
http://www.quirksmode.org/dom/w3c_cssom.html#t03
w3schools มีล่ามและจาวาสคริปต์ออนไลน์เพื่อให้คุณสามารถดูว่าแต่ละคนทำอะไร
http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy
<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
</script>
</head>
<body>
<p onmousedown="show_coords(event)">Click this paragraph,
and an alert box will alert the x and y coordinates
of the mouse pointer.</p>
</body>
</html>นี่คือภาพที่อธิบายความแตกต่างระหว่างและpageYclientY
เหมือนกันpageXและclientXตามลำดับ
pageX/Y พิกัดสัมพันธ์กับมุมซ้ายบนของหน้าการแสดงผลทั้งหมด (รวมถึงชิ้นส่วนที่ซ่อนโดยการเลื่อน)
ในขณะที่clientX/Yพิกัดสัมพันธ์กับมุมบนซ้ายของส่วนที่มองเห็นของหน้า "เห็น" ผ่านหน้าต่างเบราว์เซอร์
คุณอาจไม่ต้องการ screenX/Y
screenX/Yคืออะไร?
pageX/pageYควรใช้แทนclientX/clientYหรือไม่
<html>องค์ประกอบใน CSS พิกเซลviewportในพิกเซล CSSscreenพิกเซลของอุปกรณ์เกี่ยวกับคำถามสุดท้ายของคุณถ้าการคำนวณมีความคล้ายคลึงกันบนเดสก์ทอปและเบราว์เซอร์มือถือ ... เพื่อความเข้าใจที่ดีกว่า - เบราว์เซอร์บนมือถือ - เราต้องแยกความแตกต่างทั้งสองแนวคิดใหม่ที่: วิวพอร์ตรูปแบบและวิวพอร์ตภาพ วิวพอร์ตการมองเห็นเป็นส่วนหนึ่งของหน้าเว็บที่แสดงบนหน้าจอในปัจจุบัน เค้าโครงวิวพอร์ตมีความหมายเหมือนกันสำหรับหน้าเต็มรูปแบบที่แสดงบนเบราว์เซอร์เดสก์ท็อป (ด้วยองค์ประกอบทั้งหมดที่ไม่สามารถมองเห็นได้ในวิวพอร์ตปัจจุบัน)
บนเบราว์เซอร์มือถือpageXและpageYยังคงสัมพันธ์กับหน้าเว็บในพิกเซลพิกเซลเพื่อให้คุณสามารถรับพิกัดเมาส์เทียบกับหน้าเอกสาร บนมืออื่น ๆclientXและclientYกำหนดพิกัดเมาส์ในความสัมพันธ์กับวิวพอร์ตภาพ
มีเธรดสแต็คโอเวอร์โฟลว์อื่นที่นี่เกี่ยวกับความแตกต่างระหว่างวิวพอร์ตวิวและวิวพอร์ตเลย์เอาต์: ความแตกต่างระหว่างวิวพอร์ตวิวและเค้าโครงวิวพอร์ต?
แหล่งข้อมูลอื่นที่ดี: http://www.quirksmode.org/mobile/viewports2.html
สิ่งที่ช่วยฉันได้คือเพิ่มกิจกรรมโดยตรงในหน้านี้และคลิกเพื่อตัวเอง! เปิดคอนโซลของคุณในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ / Firebug ฯลฯ และวางสิ่งนี้:
document.addEventListener('click', function(e) {
console.log(
'page: ' + e.pageX + ',' + e.pageY,
'client: ' + e.clientX + ',' + e.clientY,
'screen: ' + e.screenX + ',' + e.screenY)
}, false);Click anywhereด้วยตัวอย่างนี้คุณสามารถติดตามตำแหน่งคลิกของคุณในขณะที่คุณเลื่อนย้ายหน้าต่างเบราว์เซอร์ ฯลฯ
โปรดสังเกตว่า pageX / Y และ clientX / Y เหมือนกันเมื่อคุณเลื่อนไปจนสุด!
ความแตกต่างระหว่างสิ่งเหล่านี้จะขึ้นอยู่กับเบราว์เซอร์ที่คุณอ้างถึงเป็นส่วนใหญ่ แต่ละคนใช้คุณสมบัติเหล่านี้แตกต่างกันหรือไม่เลย Quirksmodeมีเอกสารที่ยอดเยี่ยมเกี่ยวกับความแตกต่างของเบราว์เซอร์เกี่ยวกับมาตรฐาน W3C เช่นกิจกรรม DOM และ JavaScript