? ЯК дізнатися координати курсора :: ПЗ

Щоб запрограмувати якісь дії у відповідь на переміщення курсора у вікні браузера буває необхідно визначити його координати. Це може зробити скрипт, який має можливість відстежувати події, що відбуваються в браузері. Таку можливість має виконуваний на стороні клієнта javascript-сценарій. Нижче описаний один з варіантів отримання координат курсора з використанням можливостей цієї мови.

Інструкція

Використовуйте властивості об'єкта event для отримання поточних координат курсора. Цей об'єкт має цілий набір властивостей, які мають відношення до визначення координат курсору миші. Властивість LayerX містить виміряне в піскселах відстань від лівого краю поточного шару, а LayerY - аналогічну відстань від його верхнього краю. У цих двох властивостей є синоніми - замість event.LayerX можна писати event.x, а замість event.LayerY - event.y. Властивості pageX і pageY містять горизонтальну і вертикальну координати курсора щодо верхнього лівого краю вікна браузера, а в властивості screenX і screenY поміщаються аналогічні значення щодо екрану монітора.

Додавайте в код перевірку типу браузера і використовуйте властивості clientX і clientY на додаток до наведених вище властивостям об'єкта event. Це необхідно через те, що Microsoft в свій браузер Internet Explorer закладає відмінне від стандартних визначень позначення властивостей. Поєднати обидва підходи до визначення координат можна, наприклад, так:
if (evevnt.pageX || evevnt.pageY) {

coordinateX = evevnt.pageX-

coordinateY = evevnt.pageY-

}

else if (evevnt.clientX || evevnt.clientY)

Помістіть код визначення координат в користувача функцію. Наприклад:
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)
return {"coordX": coordinateX, "coordY": coordinateY} -

}
Ця функція повертає масив з двох іменованих елементів, перший з яких (з ключем coordX) містить координату по осі X, а другий (coordY) - по осі Y.

Викликайте цю функцію з якого або події - наприклад, за подією переміщення миші (onmousemove) в контексті документа. Наведений нижче зразок використовує функцію для виведення координат миші в рядок стану:
document.onmousemove = function (evevnt) {var CurCoord = GetMouse (evevnt) - window.status = "коорд X:" + CurCoord.coordX + "px, коорд Y:" + CurCoord.coordY + "px" -} -