Om 'n paar handelinge te programmeer in reaksie op die beweging van die wyser in die blaaiervenster, is dit soms nodig om die koördinate te bepaal. Dit kan gedoen word deur 'n script wat die vermoë het om gebeure wat in die blaaier voorkom op te spoor. 'N JavaScript-script aan die kliënt het hierdie vermoë. Hieronder word een van die opsies beskryf om die koördinate van die wyser te verkry met behulp van die vermoëns van hierdie taal.
Instruksies
Stap 1
Gebruik die eienskappe van die gebeurtenisvoorwerp om die huidige koördinate van die wyser te kry. Hierdie voorwerp het 'n hele reeks eienskappe wat relevant is vir die bepaling van die koördinate van die muiswyser. Die LayerX-eienskap bevat die afstand gemeet in pixels vanaf die linkerrand van die huidige laag, en LayerY - dieselfde afstand vanaf die boonste rand. Hierdie twee eienskappe het sinonieme - in plaas van event. LayerX, kan u event.x skryf, en in plaas van event. LayerY, kan u event.y skryf. Die pageX- en pageY-eienskappe hou die horisontale en vertikale koördinate van die wyser in verhouding tot die linkerbovenkant van die blaaiervenster, en die screenX- en screenY-eienskappe hou dieselfde waardes in verhouding tot die monitorskerm.
Stap 2
Voeg 'n blaaier-tipe kontrolering by u kode en gebruik die clientX- en clientY-eienskappe bykomend tot bogenoemde eienskappe op die gebeurtenisvoorwerp. Dit is nodig omdat Microsoft 'n ander eiendomsbenaming in sy Internet Explorer-blaaier gebruik. U kan beide benaderings om koördinate te bepaal, soos volg kombineer:
as (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
koördinaatY = evevnt.pageY;
}
anders as (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;
}
Stap 3
Plaas die koördinaat-definisie-kode in 'n pasgemaakte funksie. Byvoorbeeld:
funksie GetMouse (evevnt) {
var koördinaatX = 0, koördinaatY = 0;
as (! evevnt) evevnt = venster.gebeurtenis;
as (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
koördinaatY = evevnt.pageY;
}
anders as (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;
}
retour {"coordX": coordinateX, "coordY": coordinateY};
}
Hierdie funksie gee 'n skikking van twee benoemde elemente, waarvan die eerste (met die coordX-sleutel) die X-koördinaat bevat, en die tweede (coordY) die Y-koördinaat bevat.
Stap 4
Noem hierdie funksie op 'n gebeurtenis - byvoorbeeld in die muis skuif-gebeurtenis (onmousemove) in die dokumentkonteks. Die voorbeeld hieronder gebruik 'n funksie om die muiskoördinate na die statusbalk uit te voer:
document.onmousemove = funksie (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "koord X:" + CurCoord.coordX + "px, koord Y:" + CurCoord.coordY + "px";};
