Як дізнатися координати курсора

Як дізнатися координати курсора

Щоб запрограмувати якісь дії у відповідь на переміщення курсора у вікні браузера буває необхідно визначити його координати. Це може зробити скрипт, який має можливість відслідковувати події, що відбуваються в браузері. Таку можливість має виконується на стороні клієнта 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»;};