Щоб запрограмувати якісь дії у відповідь на переміщення курсора у вікні браузера буває необхідно визначити його координати. Це може зробити скрипт, який має можливість відстежувати події, що відбуваються в браузері. Таку можливість має виконуваний на боці клієнта JavaScript-сценарій. Нижче описано один з варіантів отримання координат курсора з використанням можливостей цієї мови.
Інструкція
1. Використовуйте властивості об 'єкта event для отримання поточних координат курсора. Цей об 'єкт має цілий набір властивостей, пов' язаних з визначенням координат курсора миші. Властивість LayerX містить вимірену в пискселах відстань від лівого краю поточного шару, а LayerY - аналогічну відстань від його верхнього краю. У цих двох властивостей є синоніми - замість event. LayerX можна писати event.x, а замість event. LayerY - event.y. Властивості pceX і pceY містять горизонтальну і вертикальну координати курсора відносно верхнього лівого краю вікна браузера, а властивості 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"":coordinceY};} Ця функція повертає масив з двох іменованих елементів, перший з яких (з ключем coordX) містить координату по осі X, а другий (coordY) - по осі Y.
4. Викликайте цю функцію за будь-якою подією - наприклад, за подією переміщення миші (onmousemove) в контексті документа. Наведений нижче зразок використовує функцію для виведення координат миші у рядок стану:document.onmousemove = function(evevnt){var CurCoord = GetMouse(evevnt); window.status = "" коорд X:"+ CurCoord.coordX +" "px, коорд Y:""+CurCoord.coordY+""px"";};