Браузер терезесінде курсордың қозғалысына жауап ретінде кейбір әрекеттерді бағдарламалау үшін кейде оның координаттарын анықтау қажет болады. Мұны браузерде болып жатқан оқиғаларды бақылау мүмкіндігі бар сценарий арқылы жасауға болады. Клиенттік JavaScript сценарийінде осындай мүмкіндік бар. Төменде осы тілдің мүмкіндіктерін қолдана отырып, меңзердің координаттарын алу нұсқаларының бірі сипатталған.
Нұсқаулық
1-қадам
Меңзердің ағымдағы координаттарын алу үшін оқиға объектісінің қасиеттерін қолданыңыз. Бұл объект тінтуір курсорының координаттарын анықтауға қатысты қасиеттердің барлық жиынтығына ие. LayerX қасиеті ағымдағы қабаттың сол жақ шетінен пиксельмен өлшенген қашықтықты, ал LayerY - оның жоғарғы шетінен бірдей қашықтықты қамтиды. Бұл екі қасиеттің синонимдері бар - event. LayerX орнына event.x, ал event. LayerY орнына event.y жазуға болады. PageX және pageY қасиеттері курсордың көлденең және тік координаттарын браузер терезесінің сол жақ жоғарғы жиегіне қатысты ұстайды, ал screenX және screenY қасиеттері монитор экранына қатысты ұқсас мәндерді ұстайды.
2-қадам
Кодқа браузер түрін тексеруді қосыңыз және оқиға объектісіндегі жоғарыда аталған қасиеттерге қосымша clientX және clientY қасиеттерін қолданыңыз. Бұл қажет, себебі Microsoft өзінің Internet Explorer шолғышында басқа сипаттаманы қолданады. Координаттарды анықтауға екі тәсілді де біріктіруге болады, мысалы:
егер (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
координат Y = evevnt.pageY;
}
басқаша болса (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;
}
3-қадам
Координатаның анықтама кодын теңшелетін функцияға орналастырыңыз. Мысалға:
GetMouse функциясы (evevnt) {
varordininateX = 0, koordinatY = 0;
егер (! evevnt) evevnt = window.event;
егер (evevnt.pageX || evevnt.pageY) {
coordinateX = evevnt.pageX;
координат Y = evevnt.pageY;
}
басқаша болса (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};
}
Бұл функция атаулы екі элементтен тұратын массивті қайтарады, оның біріншісі (coordX кілтімен) X координатасын, ал екіншісі (coordY) Y координатын қамтиды.
4-қадам
Бұл функцияны қандай да бір оқиғаға шақырыңыз - мысалы, құжат контекстіндегі тінтуірді жылжыту оқиғасында (onmousemove). Төмендегі үлгі тінтуір координаттарын күй жолағына шығару үшін функцияны қолданады:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt); window.status = «coord X:» + CurCoord.coordX + «px, Y координаты:» + CurCoord.coordY + «px»;};
