Инструкция
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;
}
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.
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";};
document.onmousemove = function(evevnt){var CurCoord = GetMouse(evevnt); window.status = "коорд X:"+CurCoord.coordX+"px, коорд Y:"+CurCoord.coordY+"px";};
Видео по теме