Për të programuar disa veprime në përgjigje të lëvizjes së kursorit në dritaren e shfletuesit, ndonjëherë është e nevojshme të përcaktohen koordinatat e tij. Kjo mund të bëhet nga një skenar që ka aftësinë për të ndjekur ngjarjet që ndodhin në shfletuesin. Një skenar JavaScript nga ana e klientit e ka këtë aftësi. Më poshtë përshkruhet një nga opsionet për marrjen e koordinatave të kursorit duke përdorur aftësitë e kësaj gjuhe.
Udhëzimet
Hapi 1
Përdorni vetitë e objektit të ngjarjes për të marrë koordinatat aktuale të kursorit. Ky objekt ka një tërësi vetish që janë të rëndësishme për përcaktimin e koordinatave të kursorit të miut. Prona LayerX përmban distancën e matur në pixel nga buza e majtë e shtresës aktuale dhe LayerY - e njëjta distancë nga buza e saj e sipërme. Këto dy veti kanë sinonime - në vend të event. LayerX, ju mund të shkruani event.x, dhe në vend të event. LayerY, ju mund të shkruani event.y. Karakteristikat pageX dhe pageY mbajnë koordinatat horizontale dhe vertikale të kursorit në krahasim me skajin e sipërm të majtë të dritares së shfletuesit, dhe vetitë screenX dhe screenY mbajnë vlera të ngjashme në krahasim me ekranin e monitorit.
Hapi 2
Shtoni kontrollin e llojit të shfletuesit në kodin tuaj dhe përdorni pronat klientX dhe klientY përveç vetive të mësipërme në objektin e ngjarjes. Kjo është e nevojshme sepse Microsoft përdor një përcaktim të ndryshëm të pronës në shfletuesin e tij Internet Explorer. Ju mund të kombinoni të dy qasjet për përcaktimin e koordinatave, për shembull, si kjo:
nëse (evevnt.pageX || evevnt.pageY) {
koordinataX = evevnt.pageX;
koordinataY = evevnt.pageY;
}
tjetër nëse (evevnt.clientX || evevnt.clientY) {
koordinataX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinataY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Hapi 3
Vendosni kodin e përcaktimit të koordinatës në një funksion të personalizuar. Për shembull:
funksioni GetMouse (evevnt) {
koordinata varX = 0, koordinataY = 0;
nëse (! evevnt) evevnt = dritarja.varg;
nëse (evevnt.pageX || evevnt.pageY) {
koordinataX = evevnt.pageX;
koordinataY = evevnt.pageY;
}
tjetër nëse (evevnt.clientX || evevnt.clientY) {
koordinataX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinataY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
kthimi {"ordinX ": koordinataX," koordinata ": koordinataY};
}
Ky funksion kthen një grup me dy elementë të emëruar, nga të cilët i pari (me çelësinordinX) përmban koordinatën X, dhe e dyta (koordinataY) përmban koordinatën Y.
Hapi 4
Thirrni këtë funksion në disa ngjarje - për shembull, në ngjarjen e lëvizjes së miut (onmousemove) në kontekstin e dokumentit. Shembulli më poshtë përdor një funksion për të nxjerrë koordinatat e miut në shiritin e statusit:
document.onmousemove = funksioni (evevnt) {var CurCoord = GetMouse (evevnt); dritarja.status = "koordinata X:" + CurCoord.coordX + "px, koordinata Y:" + CurCoord.coordY + "px";};
