Как узнать координаты курсора

Чтобы запрограммировать какие-то действия в ответ на перемещение курсора в окне браузера бывает необходимо определить его координаты. Это может сделать скрипт, который имеет возможность отслеживать события, происходящие в браузере. Такую возможность имеет выполняемый на стороне клиента JavaScript-сценарий. Ниже описан один из вариантов получения координат курсора с использованием возможностей этого языка.

Инструкция

1. Используйте свойства объекта event для получения текущих координат курсора. Этот объект имеет целый набор свойств, которые имеют отношение к определению координат курсора мыши. Свойство LayerX содержит измеренное в пискселах расстояние от левого края текущего слоя, а LayerY - аналогичное расстояние от его верхнего края. У этих двух свойств есть синонимы - вместо event.LayerX можно писать event.x, а вместо event.LayerY - event.y. Свойства pageX и pageY содержат горизонтальную и вертикальную координаты курсора относительно верхнего левого края окна браузера, а в свойства screenX и screenY помещаются аналогичные значения относительно экрана монитора.
2. Добавляйте в код проверку типа браузера и используйте свойства clientX и clientY в дополнение к приведенным выше свойствам объекта event. Это необходимо из-за того, что Microsoft в свой браузер Internet Explorer закладывает отличное от стандартных определений обозначение свойств. Совместить оба подхода к определению координат можно, например, так:
   if(evevnt.pageX || evevnt.pageY) {
   
   coordinateX = evevnt.pageX;
   
   coordinateY = evevnt.pageY;
   
   }
   
   else if(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. Поместите код определения координат в пользовательскую функцию. Например:
   function GetMouse(evevnt) {
   
   var coordinateX = 0, coordinateY = 0;
   if (!evevnt) evevnt = window.event;
   if(evevnt.pageX || evevnt.pageY) {
   
   coordinateX = evevnt.pageX;
   
   coordinateY = evevnt.pageY;
   
   }
   
   else if(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 = "коорд X:"+CurCoord.coordX+"px, коорд Y:"+CurCoord.coordY+"px";};