За да програмирате някои действия в отговор на движението на курсора в прозореца на браузъра, понякога е необходимо да се определят неговите координати. Това може да стане чрез скрипт, който има възможност да проследява събития, случващи се в браузъра. JavaScript скрипт от страна на клиента има тази възможност. По-долу е описана една от опциите за получаване на координатите на курсора, използвайки възможностите на този език.
Инструкции
Етап 1
Използвайте свойствата на обекта на събитието, за да получите текущите координати на курсора. Този обект има цял набор от свойства, които са от значение за определяне на координатите на курсора на мишката. Свойството LayerX съдържа разстоянието, измерено в пиксели от левия ръб на текущия слой, и LayerY - същото разстояние от горния му ръб. Тези две свойства имат синоними - вместо event. LayerX, можете да напишете event.x, а вместо event. LayerY, можете да напишете event.y. Свойствата pageX и pageY съдържат хоризонталните и вертикалните координати на курсора спрямо горния ляв край на прозореца на браузъра, а свойствата screenX и screenY имат подобни стойности спрямо екрана на монитора.
Стъпка 2
Добавете проверка на типа браузър към вашия код и използвайте свойствата clientX и clientY в допълнение към горните свойства на обекта на събитието. Това е необходимо, тъй като Microsoft използва различно обозначение на свойството в своя браузър Internet Explorer. Можете да комбинирате двата подхода за определяне на координати, например по следния начин:
if (evevnt.pageX || evevnt.pageY) {
ordinateX = evevnt.pageX;
координатаY = evevnt.pageY;
}
иначе ако (evevnt.clientX || evevnt.clientY) {
ordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
ordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Стъпка 3
Поставете кода за дефиниция на координати в персонализирана функция. Например:
функция GetMouse (evevnt) {
var координатаX = 0, координатаY = 0;
ако (! evevnt) evevnt = window.event;
if (evevnt.pageX || evevnt.pageY) {
ordinateX = evevnt.pageX;
координатаY = evevnt.pageY;
}
иначе ако (evevnt.clientX || evevnt.clientY) {
ordinateX = evevnt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
ordinateY = evevnt.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"координатаX": координираX, "координира Y": координира Y};
}
Тази функция връща масив от два имена на елементите, първият от които (с ключаordX) съдържа координатата X, а вторият (координатаY) съдържа координатата Y.
Стъпка 4
Извикайте тази функция при някакво събитие - например при събитие за преместване на мишката (onmousemove) в контекста на документа. Примерът по-долу използва функция за извеждане на координатите на мишката в лентата на състоянието:
document.onmousemove = функция (evevnt) {var CurCoord = GetMouse (evevnt); window.status = "координата X:" + CurCoord.coordX + "px, координата Y:" + CurCoord.coordY + "px";};
