Chcete-li naprogramovat některé akce v reakci na pohyb kurzoru v okně prohlížeče, je někdy nutné určit jeho souřadnice. To lze provést pomocí skriptu, který má schopnost sledovat události vyskytující se v prohlížeči. Tuto možnost má skript JavaScript na straně klienta. Níže je popsána jedna z možností získání souřadnic kurzoru pomocí schopností tohoto jazyka.
Instrukce
Krok 1
Pomocí vlastností objektu události získáte aktuální souřadnice kurzoru. Tento objekt má celou sadu vlastností, které jsou relevantní pro určení souřadnic kurzoru myši. Vlastnost LayerX obsahuje vzdálenost měřenou v pixelech od levého okraje aktuální vrstvy a LayerY - stejná vzdálenost od jejího horního okraje. Tyto dvě vlastnosti mají synonyma - místo event. LayerX můžete napsat event.x a místo event. LayerY můžete napsat event.y. Vlastnosti pageX a pageY obsahují vodorovné a svislé souřadnice kurzoru vzhledem k levému hornímu okraji okna prohlížeče a vlastnosti screenX a screenY obsahují podobné hodnoty vzhledem k obrazovce monitoru.
Krok 2
Přidejte ke svému kódu kontrolu typu prohlížeče a kromě výše uvedených vlastností objektu události použijte vlastnosti clientX a clientY. To je nutné, protože Microsoft ve svém prohlížeči Internet Explorer používá jiné označení vlastnosti. Oba přístupy k určení souřadnic můžete kombinovat, například takto:
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (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;
}
Krok 3
Umístěte kód definice souřadnic do vlastní funkce. Například:
funkce GetMouse (evevnt) {
var coordinateX = 0, coordinateY = 0;
if (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
coordinateY = evevnt.pageY;
}
else if (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;
}
return {"coordX": coordinateX, "coordY": coordinateY};
}
Tato funkce vrací pole dvou pojmenovaných prvků, z nichž první (s klíčem coordX) obsahuje souřadnici X a druhý (coordY) obsahuje souřadnici Y.
Krok 4
Tuto funkci zavolejte na nějakou událost - například na událost pohybu myší (onmousemove) v kontextu dokumentu. Ukázka níže používá funkci pro výstup souřadnic myši do stavového řádku:
document.onmousemove = funkce (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};
