Размер, прокрутка, координаты элемента, а также координаты курсора мышки (точки нажатия) | JavaScript
Координаты курсора мышки относительно экрана монитора, страницы или окна браузера
Образец (щелчок по любому месту зелёного прямоугольника):
Определить элемент, который находится под курсором
Образец (щелчок по любому месту зелёного прямоугольника):
Дополнение: этот же код применяется чтобы узнать место, куда нажал пользователь сенсорного устройства (планшет, телефон).
Координаты курсора мышки внутри элемента (div, img)
Образец (щелчок по любому месту зелёного прямоугольника):
Дополнение: этот же код применяется чтобы узнать место, куда нажал пользователь сенсорного устройства (планшет, телефон).
Координаты расположения элемента
Расстояние от верхнего/левого края окна браузера до элемента
Метод elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера
Образец (прокрутка или изменение окна браузера, изменение размера элемента):
elem.getBoundingClientRect().width/height поддерживаются с IE9 [developer.mozilla.org]. Кроссбраузерное решение:
Расстояние от правого/нижнего края окна браузера до элемента
Чтобы узнать отступ справа или снизу от элемента до края области просмотра окна браузера:
Образец (прокрутка или изменение окна браузера, изменение размера элемента):
Позиция одного элемента относительно другого
Рассчитать позицию одного элемента относительно другого (например, потомка относительно предка) можно, если получить разницу их координат (например, координаты родителя вычесть из координат дочернего элемента):
Смещение относительно elem.offsetParent
Размер элемента: ширина, высота, прокрутка
Образец (щелчок по прямоугольнику с серой рамкой, его изменение или прокрутка содержимого):
Размер монитора, страницы, окна браузера: ширина, высота, прокрутка
| разрешение экрана монитора | window.screen.width/height |
|---|---|
| доступный размер экрана монитора | window.screen.availWidth/Height |
| прокрутка (расстояние от верхнего левого угла страницы) | window.scrollX/Y (без IE) |
| window.pageXOffset/pageYOffset (IE≥9) | |
| document.documentElement.scrollLeft/scrollTop | |
| document.documentElement.getBoundingClientRect().left/top | |
| максимально возможная прокрутка | window.scrollMaxX/Y (только Mozilla Firefox) |
| размер окна браузера | window.outerWidth/Height (IE≥9) |
| размер области просмотра окна браузера | window.innerWidth/Height (IE≥9) |
| размер области просмотра окна браузера без полосы прокрутки | document.documentElement.clientWidth/Height |
| расстояние от верхнего левого угла монитора до окна браузера | window.screenX/Y (IE≥9, см. window.screenLeft/Top ) |
Образец (изменение, прокрутка содержимого окна браузера):
Координаты в документе
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/coordinates.
Система координат относительно страницы или, иначе говоря, относительно документа, начинается в левом-верхнем углу, но не окна, а именно страницы.
И координаты в ней означают позицию по отношению не к окну браузера, а к документу в целом.
Они нужны в первую очередь для того, чтобы показывать элемент в определённом месте страницы, а не окна.
Сравнение систем координат
Когда страница не прокручена, точки начала координат относительно окна (clientX,clientY) и документа (pageX,pageY) совпадают:
Например, координаты элемента с надписью «STANDARDS» равны расстоянию от верхней/левой границы окна:
Прокрутим страницу, чтобы элемент был на самом верху:
Посмотрите на рисунок ниже, на нём – та же страница, только прокрученная, и тот же элемент «STANDARDS».
Получение координат
К сожалению, готовой функции для получения координат элемента относительно страницы нет. Но её можно легко написать самим.
Наша функция getCoords(elem) будет брать результат elem.getBoundingClientRect() и прибавлять текущую прокрутку документа.
Результат getCoords : объект с координатами
Если нужно поддерживать более старые IE, то вот альтернативный, самый кросс-браузерный вариант:
Разберём что и зачем, по шагам:
Устаревший метод: offset*
Мы разбираем его здесь с учебной целью, так как он используется лишь в старых браузерах.
Вот функция, реализующая такой подход.
Вы можете увидеть разницу между вычислением координат через offset* и getBoundingClientRect на примере.
Пример клика в правильном месте (обратите внимание на разницу координат):
Именно getCoords всегда возвращает верное значение.
Координаты на экране screenX/screenY
Есть ещё одна система координат, которая используется очень редко, но для полноты картины необходимо её упомянуть.
Координаты относительно экрана screenX/screenY отсчитываются от его левого-верхнего угла. Имеется в виду именно весь экран, а не окно браузера.
Такие координаты могут быть полезны, например, при работе с мобильными устройствами или для открытия нового окна посередине экрана вызовом window.open.
Размеры экрана хранятся в глобальной переменной screen:
Координаты левого-верхнего угла браузера на экране хранятся в window.screenX, window.screenY (не поддерживаются IE8-):
Они могут быть и меньше нуля, если окно частично вне экрана.
Заметим, что общую информацию об экране и браузере получить можно, а вот координаты конкретного элемента на экране – нельзя, нет аналога getBoundingClientRect или иного метода для этого.
Итого
У любой точки в браузере есть координаты:
Иногда в старом коде можно встретить использование offsetTop/Left для подсчёта координат. Это очень старый и неправильный способ, не стоит его использовать.
Координаты будут нужны нам далее, при работе с событиями мыши (координаты клика) и элементами (перемещение).
Задачи
Область видимости для документа
В этой задаче учитываем только вертикальную прокрутку: горизонтальная делается аналогично, а нужна сильно реже.
Разместить заметку внутри элемента
Новые значения position :
Считывает текущее положение курсора мыши, а также определяет, какое окно и какой контрол находятся под курсором.
Параметры
| OutputVarX/Y | Имена переменных, в которые будут помещены координаты курсора. Координаты считаются относительно активного окна, если это не изменено командой CoordMode. |
| OutputVarWin | Имя переменной, куда помещается идентификатор окна (HWND). Если окно определить не удаётся, переменная будет пустой. |
Окно не обязано быть активным, но скрытые окна не определяются.
Имена контролов должны всегда совпадать с теми, что показывает программа Window Spy, распространяемая с версией 1.0.14 и более поздними (но для более старых версий Window Spy это не всегда так). Однако, в отличие от Window Spy, команда MouseGetPos определяет контролы окна даже если окно не активно.
1. Используется более простой метод определения контролов. Этот метод корректно определяет активное/верхнее дочернее окно в приложениях с многодокументным интерфейсом (MDI), таких как SysEdit или TextPad. Однако он менее надёжен для других целей, таких как определение контролов внутри контрола GroupBox.
2. [v1.0.43.06+] Определяет не имя контрола (ClassNN), а его идентификатор (HWND).
3. [v1.0.43.06+] Комбинация 1 и 2, описанных выше.
Примечания
Любая выходная переменная может быть опущена, если соответствующая информация не требуется.
Как узнать координаты на мониторе
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
jQuery плагин для отображения превью загружаемого файла
Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.
Определяем текущее положение курсора мыши с Python
В прошлой статье мы говорили об автоматизации графического интерфейса с Python и библиотекой pyautogui, что предполагает симуляцию действий с клавиатурой, мышью и не только. И для написания скрипта симуляции мыши важно найти координаты курсора в текущий момент, и постоянно отображать их. В данной статье мы напишем простой скрипт для решения данной задачи.
Для этого нам нужно во первых отобразить текущие координаты мыши, во вторых обновить их в соответствии с перемещением курсора по экрану. На уровне кода мы должны вызвать функцию position(), для получения текущих координат, затем при перемещении курсора стереть предыдущие координаты используя символ \b и обработать исключение KeyboardInterrupt так чтобы сочетание клавиш CTRL-C вызвало выход.
Откроем текстовый редактор и создадим файл с именем Mouse_now.py. Поместим в него наш код:
# На первом этапе импортируем модули pyautogui, time. Также напечатаем напоминание пользователю, о возможности выхода из программы нажав CTRL-C
import pyautogui
import time
print(«Press CTRL-C to quit»)
»’
Для постоянного вывода текущих координат из mouse.position() можно использовать бесконечный цикл. А для кода завершающего программу нужно будет перехватить исключение KeyboardInterrupt, которое возникает всякий раз, когда пользователь нажимает CTRL-C.
Если этого не сделать то try/exept отобразит уродливую строку сообщения об ошибке.
И чтобы обработать цикл заключим его в оператор try »’
try:
while True:
# получение текущих координат
x, y = pyautogui.position()
# метод str(x) превращает число в строку а rjust(4) сдвигает его на четыре позиции вправо
positionStr = ‘X:’+ str(x).rjust(4) +’ Y:’+ str(y).rjust(4)
# end предотвращает добавление символа новой строки, без этого старые координаты удалить не получится
print(positionStr, end = »)
# escape-символ \ b стирает конец строки и чтобы удалить всю строку умножаем его на длину строки
print(‘\b’*len(positionStr), end = », flush = True)
# для предотвращения мигания при выполнении цикла используем засыпание
time.sleep(0.01)
# Когда пользователь нажимает CTRL-C, выполнение программы переходит к разделу except и # Done будет напечатан с новой строки
except KeyboardInterrupt:
print(‘\nDone’)
Когда программа запустится, будут напечатаны только две строки. Они должны выглядеть примерно так:
# вывод
Press Ctrl-C to quit
X: 165 Y: 144
Таким образом с помощью данного скрипта, вы можете определить координаты мыши для ваших сценариев автоматизации графического интерфейса.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
