برای برنامه ریزی برخی اقدامات در پاسخ به حرکت مکان نما در پنجره مرورگر ، گاهی اوقات لازم است مختصات آن مشخص شود. این کار توسط اسکریپتی انجام می شود که توانایی ردیابی وقایع رخ داده در مرورگر را دارد. اسکریپت جاوا اسکریپت سمت مشتری از این قابلیت برخوردار است. در زیر یکی از گزینه های به دست آوردن مختصات مکان نما با استفاده از قابلیت های این زبان شرح داده شده است.
دستورالعمل ها
مرحله 1
برای بدست آوردن مختصات فعلی مکان نما از خصوصیات شی رویداد استفاده کنید. این شی دارای مجموعه ای کامل از خصوصیات است که مربوط به تعیین مختصات مکان نما ماوس است. ویژگی LayerX شامل فاصله اندازه گیری شده بر حسب پیکسل از لبه سمت چپ لایه فعلی و LayerY - همان فاصله از لبه بالایی آن است. این دو ویژگی مترادف هستند - به جای event. LayerX ، شما می توانید event.x و به جای event. LayerY بنویسید event.y. خصوصیات pageX و pageY مختصات افقی و عمودی نشانگر را نسبت به لبه بالا سمت چپ پنجره مرورگر نگه می دارند و ویژگی های screenX و screenY مقادیر مشابهی با صفحه مانیتور دارند.
گام 2
بررسی نوع مرورگر را به کد خود اضافه کنید و علاوه بر ویژگی های فوق در مورد رویداد ، از ویژگی های clientX و clientY استفاده کنید. این ضروری است زیرا مایکروسافت از ویژگی خاص دیگری در مرورگر اینترنت اکسپلورر خود استفاده می کند. برای تعیین مختصات می توانید هر دو روش را با هم ترکیب کنید ، به عنوان مثال:
if (evevnt.pageX || evevnt.pageY) {
مختصات X = evevnt.pageX؛
مختصات Y = evevnt.pageY؛
}
در غیر این صورت (evevnt.clientX || evevnt.clientY) {
مختصات X = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft؛
مختصات Y = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop؛
}
مرحله 3
کد تعریف مختصات را در یک عملکرد دلخواه قرار دهید. مثلا:
عملکرد GetMouse (evevnt) {
مختصات varX = 0 ، مختصات Y = 0 ؛
if (! evevnt) evevnt = windows.event؛
if (evevnt.pageX || evevnt.pageY) {
مختصات X = evevnt.pageX؛
مختصات Y = evevnt.pageY؛
}
در غیر این صورت (evevnt.clientX || evevnt.clientY) {
مختصات X = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft؛
مختصات Y = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop؛
}
Return {"ordinX ": مختصاتX ، "ordinY": مختصات Y}؛
}
این تابع آرایه ای از دو عنصر نامیده شده را برمی گرداند ، عناصر اول (با کلیدordX) حاوی مختصات X است و دومی (ordinY) شامل مختصات Y است.
مرحله 4
این تابع را در برخی از رویدادها فراخوانی کنید - به عنوان مثال ، در رویداد حرکت ماوس (onmousemove) در متن سند. نمونه زیر از تابعی برای خروج مختصات موس به نوار وضعیت استفاده می کند:
document.onmousemove = تابع (evevnt) {var CurCoord = GetMouse (evevnt)؛ window.status = "Coord X:" + CurCoord.coordX + "px، coord Y:" + CurCoord.coordY + "px"؛}؛
