Kā Uzzināt Kursora Koordinātas

Satura rādītājs:

Kā Uzzināt Kursora Koordinātas
Kā Uzzināt Kursora Koordinātas

Video: Kā Uzzināt Kursora Koordinātas

Video: Kā Uzzināt Kursora Koordinātas
Video: Attālums starp diviem punktiem plaknē 2024, Maijs
Anonim

Lai ieprogrammētu dažas darbības, reaģējot uz kursora pārvietošanos pārlūka logā, dažreiz ir jānosaka tā koordinātas. To var izdarīt ar skriptu, kam ir iespēja izsekot pārlūkprogrammā notiekošajiem notikumiem. Šī iespēja ir klienta puses JavaScript skriptam. Zemāk ir aprakstīta viena no iespējām, kā iegūt kursora koordinātas, izmantojot šīs valodas iespējas.

Kā uzzināt kursora koordinātas
Kā uzzināt kursora koordinātas

Instrukcijas

1. solis

Izmantojiet notikuma objekta īpašības, lai iegūtu pašreizējās kursora koordinātas. Šim objektam ir viss īpašību kopums, kas ir būtisks, lai noteiktu peles kursora koordinātas. LayerX rekvizīts satur pikseļos izmērīto attālumu no pašreizējā slāņa kreisās malas un LayerY - tādu pašu attālumu no tā augšējās malas. Šīm divām īpašībām ir sinonīmi - event. LayerX vietā varat rakstīt event.x un event. LayerY vietā rakstīt event.y. Rekvizīti pageX un pageY satur kursora horizontālās un vertikālās koordinātas attiecībā pret pārlūkprogrammas loga augšējo kreiso malu, un īpašībām screenX un screenY ir līdzīgas vērtības attiecībā pret monitora ekrānu.

2. solis

Pievienojiet kodam pārlūka tipa pārbaudi un papildus iepriekš minētajiem notikuma objekta rekvizītiem izmantojiet rekvizītus clientX un clientY. Tas ir nepieciešams, jo Microsoft savā Internet Explorer pārlūkprogrammā izmanto citu rekvizītu apzīmējumu. Koordinātu noteikšanai varat apvienot abas pieejas, piemēram, šādi:

ja (evevnt.lapaX || evevnt.lapaY) {

koordinātasX = evevnt.lapaX;

koordinātaY = evevnt.lapaY;

}

cits, ja (evevnt.clientX || evevnt.clientY) {

coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;

koordinātesY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;

}

3. solis

Novietojiet koordinātu definīcijas kodu pielāgotā funkcijā. Piemēram:

funkcija GetMouse (evevnt) {

var koordinātesX = 0, koordinātasY = 0;

if (! evevnt) evevnt = window.event;

ja (evevnt.lapaX || evevnt.lapaY) {

koordinātasX = evevnt.lapaX;

koordinātaY = evevnt.lapaY;

}

cits, ja (evevnt.clientX || evevnt.clientY) {

coordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;

koordinātesY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;

}

atgriezties {"coordX": koordinātuX, "coordY": koordinātuY};

}

Šī funkcija atgriež divu nosauktu elementu masīvu, no kuriem pirmais (ar taustiņu coordX) satur X koordinātu, bet otrais (coordY) satur Y koordinātu.

4. solis

Zvaniet šai funkcijai uz kādu notikumu, piemēram, ar peles pārvietošanas notikumu (onmousemove) dokumenta kontekstā. Tālāk sniegtajā paraugā tiek izmantota funkcija, lai peles koordinātas izvestu statusa joslā:

document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "coord X:" + CurCoord.coordX + "px, coord Y:" + CurCoord.coordY + "px";};

Ieteicams: