כדי לתכנת פעולות מסוימות בתגובה לתנועת הסמן בחלון הדפדפן, לעיתים יש צורך לקבוע את הקואורדינטות שלו. ניתן לעשות זאת על ידי סקריפט בעל יכולת לעקוב אחר אירועים המתרחשים בדפדפן. יכולת זו יש לסקריפט JavaScript בצד הלקוח. להלן מתוארת אחת האפשרויות להשגת קואורדינטות הסמן באמצעות יכולות השפה הזו.
הוראות
שלב 1
השתמש בתכונות של אובייקט האירוע כדי לקבל את הקואורדינטות הנוכחיות של הסמן. לאובייקט זה קבוצה שלמה של מאפיינים הרלוונטיים לקביעת הקואורדינטות של סמן העכבר. המאפיין LayerX מכיל את המרחק שנמדד בפיקסלים מהקצה השמאלי של השכבה הנוכחית, ו- LayerY - אותו מרחק מהקצה העליון שלה. לשני המאפיינים הללו יש מילים נרדפות - במקום event. LayerX, אתה יכול לכתוב event.x, ובמקום event. LayerY, אתה יכול לכתוב event.y. מאפייני pageX ו- pageY מחזיקים את הקואורדינטות האופקיות והאנכיות של הסמן ביחס לקצה השמאלי העליון של חלון הדפדפן, ומאפייני screenX ו- screenY מחזיקים בערכים דומים ביחס למסך הצג.
שלב 2
הוסף בדיקת סוג דפדפן לקוד שלך והשתמש במאפייני clientX ו- clientY בנוסף למאפיינים שלעיל על אובייקט האירוע. זה הכרחי מכיוון שמיקרוסופט משתמשת בכינוי נכס שונה בדפדפן Internet Explorer שלה. אתה יכול לשלב את שתי הגישות לקביעת קואורדינטות, למשל, כך:
אם (evevnt.pageX || evevnt.pageY) {
קואורדינטקס = evevnt.pageX;
קואורדינטה Y = evevnt.pageY;
}
אחרת אם (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
שלב 3
מקם את קוד הגדרת הקואורדינטות בפונקציה מותאמת אישית. לדוגמה:
פונקציה GetMouse (evevnt) {
var coordinateX = 0, coordinateY = 0;
אם (! evevnt) evevnt = window.event;
אם (evevnt.pageX || evevnt.pageY) {
קואורדינטקס = evevnt.pageX;
קואורדינטה Y = evevnt.pageY;
}
אחרת אם (evevnt.clientX || evevnt.clientY) {
coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
coordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
להחזיר {"coordX": coordinateX, "coordY": coordinateY};
}
פונקציה זו מחזירה מערך של שני אלמנטים בעלי שם, הראשון שבהם (עם מקש coordX) מכיל את הקואורדינטה X, והשני (coordY) מכיל את הקואורדינטה Y.
שלב 4
התקשר לפונקציה זו באירוע כלשהו - למשל, באירוע העברת העכבר (onmousemove) בהקשר המסמך. המדגם שלמטה משתמש בפונקציה להפקת קואורדינטות העכבר לשורת המצב:
document.onmousemove = פונקציה (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
