Norint užprogramuoti kai kuriuos veiksmus, atsižvelgiant į žymeklio judėjimą naršyklės lange, kartais reikia nustatyti jo koordinates. Tai gali padaryti scenarijus, galintis stebėti naršyklėje vykstančius įvykius. Kliento pusės „JavaScript“scenarijus turi šią galimybę. Žemiau aprašyta viena iš variantų, kaip gauti žymeklio koordinates naudojant šios kalbos galimybes.
Nurodymai
1 žingsnis
Norėdami gauti dabartines žymeklio koordinates, naudokite įvykio objekto ypatybes. Šis objektas turi visą savybių rinkinį, kuris yra svarbus nustatant pelės žymeklio koordinates. Ypatybėje „LayerX“yra atstumas, išmatuotas pikseliais nuo kairio dabartinio sluoksnio krašto, o „LayerY“- toks pat atstumas nuo viršutinio krašto. Šios dvi ypatybės turi sinonimus - vietoj event. LayerX, galite rašyti event.x, o vietoj event. LayerY galite rašyti event.y. Ypatybėse „pageX“ir „pageY“laikomos žymeklio horizontalios ir vertikalios koordinatės, palyginti su viršutiniu kairiuoju naršyklės lango kraštu, o „screenX“ir „screenY“savybėse pateikiamos panašios vertės, palyginti su monitoriaus ekranu.
2 žingsnis
Pridėkite naršyklės tipo tikrinimą prie savo kodo ir naudokite „clientX“ir „clientY“ypatybes be anksčiau nurodytų įvykio objekto ypatybių. Tai reikalinga, nes „Microsoft“savo naršyklėje „Internet Explorer“naudoja kitą nuosavybės žymėjimą. Pavyzdžiui, galite derinti abu metodus nustatydami koordinates:
jei (evevnt.pageX || evevnt.pageY) {
koordinatėX = evevnt.pageX;
koordinatėY = evevnt.pageY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinačiųX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinačiųY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
3 žingsnis
Įdėkite koordinatės apibrėžimo kodą į pasirinktinę funkciją. Pavyzdžiui:
funkcija „GetMouse“(evevnt) {
var koordinatėX = 0, koordinatėY = 0;
if (! evevnt) evevnt = window.event;
jei (evevnt.pageX || evevnt.pageY) {
koordinatėX = evevnt.pageX;
koordinatėY = evevnt.puslapisY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinačiųX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinačiųY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
grįžti {"coordX": koordinatėX, "coordY": koordinatėY};
}
Ši funkcija pateikia dviejų įvardytų elementų masyvą, iš kurių pirmajame (su „coordX“klavišu) yra X koordinatė, o antrojoje („coordY“) yra Y koordinatė.
4 žingsnis
Iškvieskite šią funkciją kai kuriuose įvykiuose, pavyzdžiui, pelės judėjimo įvykyje (onmousemove) dokumento kontekste. Toliau pateiktame pavyzdyje naudojama funkcija, kad pelės koordinatės būtų išvestos į būsenos juostą:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
