Определение координат указателя мыши на JavaScript


Содержание

Координаты курсора внутри блока

Функция выдаёт координаты курсора, относительно того объекта, из которого она была вызвана.

Но если требуется вызвать функцию, скажем, по клику на другой объект, тут я не знаю как быть.

Event отсылает ссылку на объект из которого вызвано событие. Как решить проблему?

Javascript
02.08.2013, 17:32

Координаты курсора
Проблема такая: Есть картинка, необходимо получить координаты мыши на этой картинке где щелкнул.

Координаты курсора на обьекте в IE
Проблема только с браузером IE! Собственно есть некий скрипт который показывает подсказку, когда.

Получить координаты курсора
Как получить координаты курсора мыши в конкрктный момент? «e» у меня нет так как я не в.

Появление блока при удержании курсора
Всем доброго времени суток! Необходимо на JS или JQuery реализовать следующее. При нахождении.

FPublisher

Web-технологии: База знаний

JavaScript скрипты

Координаты мыши относительно документа

Размещена 3 сентабря, 2008 года

Поводите мышкой по коду функции ниже и смотрите при этом на строку состояния.

IE5+, Mozilla/Gecko, Opera 7+

Функция возвращает объект со свойствами x, y, определяющими координаты курсора.

Как узнать координаты мыши (положение курсора мыши) внутри абсолютно позиционированного элемента?

Последние поступления:

ТехЗадание на Землю

Размещена 14 марта 2020 года

Пpоект Genesis (из коpпоpативной пеpеписки)


Шпаргалка по работе с Vim

Размещена 05 декабря 2020 года

Vim довольно мощный редактор, но работа с ним не всегда наглядна.
Например если нужно отредактировать какой-то файл например при помощи crontab, без знания специфики работы с viv никак.

Ошибка: Error: Cannot find a val >Размещена 13 сентабря 2020 года

Если возникает ошибка на centos 5 вида
YumRepo Error: All mirror URLs are not using ftp, http[s] or file.
Eg. Invalid release/

Linux Optimization

Размещена 30 июля 2012 года

Получить координаты курсора на экране

Предлагаем Вам простой JavaScript код, отображающий текущие координаты курсора на экране. Координаты берутся относительно окна странички и не превышают разрешение экрана.

Данный скрипт позволяет выводить координаты курсора как в statusbar-е, так и в заданном месте странички.

Текущие координаты курсора:

Для получения текущих координат курсора на экране сайта вставьте на свою страничку следующий скрипт:

Далее, в том месте странички, где необходимо получить координаты курсора (если необходимо), вставляем элемент .

Если Вы все правильно сделали, то при перемещении курсора мыши по экрану браузера внутри элемента и в statusbar-е должны отображаться текущие координаты курсора.

Конечно можно, но для этого придется воспользоваться библиотекой JQuery:

Веб-заметки и Веб-подсказки

Как получить координаты мыши на JavaScript

Информация об координатах указателя мыши хранится в таких свойствах события:

  • clientX, clientY — содержат координаты указателя мыши относительно начала координат страницы (без учёта прокрученной(проскроленной) области);
  • pageX, pageY — содержат координаты указателя мыши относительно начала координат страницы (c учётом прокрученной(проскроленной) области);
  • screenX, screenY — содержат координаты указателя мыши относительно начала координат экрана.

Определение координат указателя мыши на JavaScript

Частная коллекция качественных материалов для тех, кто делает сайты


  • Фотошоп-мастер2000+ уроков по фотошопу
  • Фото-монстр300+ уроков для фотографов
  • Видео-смайл200+ уроков по видеообработке
  • Жизнь в стиле «Кайдзен» Техники и приемы для гармоничной и сбалансированной жизни
  • Главная»
  • Уроки»
  • Уроки jQuery для начинающих

В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Stimed — стили в зависимости от времени суток


Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.

jQuery плагин для отображения превью загружаемого файла

Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.

Определение координат указателя мыши на JavaScript

БлогNot. Javascript: отслеживаем координаты и клик мыши

Javascript: отслеживаем координаты и клик мыши

Скрипт реагирует на движение мыши, клик, совершённый на новом месте страницы, и показывает таймер, если ничего не происходит.

Вот он встроенный прямо на страницу, и, под катом, в виде исходника без HTML-обрамления.

Непонятно, зачем это в таком виде нужно — но вот понадобилось же :)

22.06.2020, 23:11; рейтинг: 1104

Обработчик события onclick

Cобытие click — это одно из событий мыши в JavaScript. О нём уже было сказано в прошлой теме. Здесь мы рассмотрим его более подробно. Напомню, что обработчик события onclick срабатывает при нажатии на элементе левой кнопкой мыши.

Координаты указателя мыши

Объект события click имеет свойства, которые содержат координаты того места, на котором был произведён клик. Свойства clientX и clientY сожержат координаты указателя мыши относительно окна браузера. Свойства pageX и pageY содержат координаты относительно документа. Координаты отсчитываются от левого верхнего угла окна или документа. Указанные свойства есть и у других объектов событий мыши.

Создадим блок и поставим на него обработчик события onclick . Он будет определять координаты указателя мыши и записывать их внутрь блока. Перед блоком добавим ещё один элемент с большой высотой, чтобы появилась прокрутка. Это нужно для того, чтобы Вы могли увидеть, как прокрутка страницы влияет на определение координат.

Запустите страницу, прокрутите её до блока и нажмите левую кнопку мыши внутри блока. В блоке должны появиться координаты того места, в котором сработало событие. Координата Y относительно документа может быть с дробной частью. Это связанно с особенностью расчёта высоты документа в браузере. Напомню, что по умолчанию в браузерах есть отступы и элементы страницы находятся не возле самого края окна браузера, а на некотором расстоянии. Прокрутите ещё немного страницу и кликните примерно в том же месте блока. Вы увидите, что координаты относительно документа не изменились, ведь блок не поменял своё положение в документе. А координаты относительно окна браузера изменились, потому что указатель мыши находился в другом месте окна. Определение координат клика иногда используется на практике для размещения в этом месте каких-то элементов страницы.

Клик с нажатой клавишей

У объекта события click есть свойство shiftKey , которое содержит true , если клик был сделан при нажатой клавише Shift. Если клик был без Shift, то свойство содержит false . Это свойство используется для того, чтобы обработчик выполнил какие-то действия, только если клик был с нажатой клавишей Shift. Подобные свойства есть для других клавиш:

metaKey — для Mac

Добавим в обработчик такой код:

Если сделать клик в блоке с нажатой клавишей Shift, то появится сообщение. В остальном, действия обработчика не изменились.

Клик правой кнопкой

Событие contextmenu — это нажатие правой кнопки мыши. Объект этого события имеет в основном такие же свойства, как объект события click . При нажатии правой кнопки мыши обычно появляется контекстное меню браузера. Появление этого меню можно отменить. Добавим блоку обработчик события:


В следующих темах будут рассмотрены остальные события мыши.

Коприрование материалов сайта возможно только с согласия администрации

Определите, на каком элементе указатель мыши находится поверх Javascript

Мне нужна функция, которая сообщает мне, какой элемент находится над курсором мыши.

Итак, например, если пользовательская мышь находится над этим текстовым полем (с id wmd-input ), вызов window.which_element_is_the_mouse_on() будет функционально эквивалентен $(«#wmd-input»)

Там действительно крутая функция под названием document.elementFromPoint , которая делает то, что она звучит.

Нам нужно найти координаты x и y мыши, а затем вызвать их с помощью этих значений:

В новых браузерах вы можете сделать следующее:

Это даст вам NodeList элементов, которые мышь в настоящее время завершена в порядке документа. Последний элемент в NodeList является наиболее конкретным, каждый из которых должен быть родителем, дедушкой и бабушкой и т.д.

Хотя следующий вопрос может не отвечать на вопрос, так как это первый результат поиска в googling (гуглер может не задавать точно такой же вопрос:), надеюсь, что он предоставит некоторый дополнительный ввод.

На самом деле существует два разных подхода к получению списка всех элементов, которые мышь в данный момент (для более новых браузеров, возможно):

«Структурный» подход — восходящее дерево DOM

Как и в ответе дермана, можно вызвать

Однако это предполагает, что только дети наследуют своих предков, что обычно имеет место, но не верно в целом, особенно при работе с SVG, где элемент в разных ветвях дерева DOM может перекрывать друг друга.

«визуальный» подход — на основе «визуального» перекрытия

Этот метод использует document.elementFromPoint(x, y) , чтобы найти самый верхний элемент, временно скрыть его (поскольку мы немедленно его восстанавливаем в том же контексте, браузер фактически не отображает это), а затем найдите второй самый верхний элемент. Выглядит немного взломанным, но он возвращает то, что вы ожидаете, когда есть, например, элементы братьев и сестер в дереве, перекрывающие друг друга. этот пост для более подробной информации,

Попробуйте оба варианта и проверьте их разные значения.

Мышь пузырьки событий мыши, поэтому вы можете поместить один слушатель в тело и дождаться, когда они начнут пузыриться, затем возьмите event.target или event.srcElement :

Вы можете посмотреть на цель события наведения mouseover на некотором подходящем предке:

Следующий код поможет вам получить элемент указателя мыши. Результирующие элементы будут отображаться в консоли.

elementFromPoint() получает только первый элемент в дереве DOM. Это в основном не достаточно для нужд разработчиков. Поэтому есть эта хорошая функция:

Это возвращает массив всех элементов элемента под заданными точками.


Для более старых браузеров, которые не поддерживают это, вы можете использовать этот ответ как запасной вариант

Цель события mousemove DOM — это самый верхний элемент DOM под курсором при перемещении мыши:

Это похоже на решение @Philip Walton, но не требует jQuery или setInterval.

Вы можете использовать этот селектор для подмаскивания объекта и управлять им как объект jquery. $(‘:hover’).last();

Позвольте мне начать, сказав, что я не рекомендую использовать метод, который я собираюсь предложить. Гораздо лучше использовать события, связанные с развитием и привязать события только к тем элементам, которые вам интересны, чтобы узнать, закончилась ли мышка с помощью mouseover , mouseout , mouseenter , mouseleave и т.д.

Если вы абсолютно ДОЛЖНЫ иметь возможность узнать, какой элемент мыши закончил, вам нужно написать функцию, которая связывает событие mouseover со всем в DOM, а затем сохраняет то, что текущий элемент находится в некотором переменная.

Вы могли бы что-то вроде этого:

В принципе, я создал немедленную функцию, которая устанавливает событие для всех элементов и сохраняет текущий элемент в закрытии, чтобы свести к минимуму ваш след.

Узнаем, с какой стороны элемента был введен курсор мыши на JavaScript

Сегодня один из читателей сайта задал мне интересную задачку, суть которой следующая. Есть некий элемент, имеющий размер 100×100 PX, можно ли определить, с какой стороны был введен курсор в этот элемент.

Задача необычная, и я даже бы поинтересовался, зачем ему это, но это его личные задумки, а наш же долг – помочь ему в этом.

Итак, что мы изначально имеем? Собственно, только сам элемент и место для вывода результата:

А теперь напишем небольшую функцию на JavaScript, которая и скажет нам, с какой стороны был введен курсор.

А вот и сама функция:

Если же вы хотите изменить принцип использования функции и отследить, с какой стороны пользователь вывел курсор мыши, а не ввел, то «onmouseenter» замените на «onmouseleave».

События мыши: клики, кнопка, координаты

События мыши: клики, кнопка, координаты

Здравствуйте! В этой статье в продолжении темы «События в JavaScript» я хотел бы мы глубже разобраться со списком событий мыши, рассмотреть их общие свойства, а также те события, которые связаны с кликом мыши. Ведь когда пользователь кликает на каком то элементе, то на самом деле происходят 2 события mousedown и mouseup. Ну и также еще имеется ряд нюансов при работе с мышью.

Типы событий мыши

Условно события мыши можно разделить на 2 типа: «простые» и «комплексные».

Простые события

Комплексные события

Как видно комплексные события состоят из двух и более простых событий.


Порядок срабатывания событий

Одно действие может порождать несколько событий.

Например, клик мышью вызовет сначала mousedown при нажатии, а затем mouseup и click при отпускании кнопки.

В случаях, когда одно действие генерирует много событий, их порядок, как правило фиксирован. Таким образом обработчики вызовутся в следующем порядке mousedown → mouseup → click.

Например, при клике события mouseup + click возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка mouseup, затем запускается click.

Получение информации о кнопке: which

При обработке событий, связанных с кликами мыши, иногда бывает важно знать, какая кнопка мыши нажата.

Для получения кнопки мыши в объекте event есть специальное свойство which.

На практике оно конечно используется редко, т.к. обычно обработчик вешается либо onclick – только на левую кнопку, либо oncontextmenu – только на правую.

Возможны такие значения:

  • event.which == 1 – левая кнопка
  • event.which == 2 – средняя кнопка
  • event.which == 3 – правая кнопка

Правый клик: oncontextmenu

Это событие будет срабатывать при клике правой кнопкой мыши:

При клике на кнопку выше после обработчика oncontextmenu будет показано обычное контекстное меню, которое браузер всегда показывает при клике данной кнопкой.

Если вы не хотите, чтобы показывалось контекстное меню по умолчанию, а хотите например показать своё, специфичное для вашего приложения, то можно отменить действие по умолчанию.

В примере ниже встроенное меню показано не будет:

Модификаторы shift, alt, ctrl и meta

Во всех событиях мыши присутствует также и информация о нажатых клавишах-модификаторах. Это клавиши Shift, Ctrl, Alt.

Например, кнопка сработает только на Alt+Shift+Клик:

На компьютерах под управлением Windows и Linux есть специальные клавиши Alt, Shift и Ctrl. А вот На Mac есть ещё одна специальная клавиша: Cmd, которой и соответствует свойство metaKey.

В случаях, где под Windows/Linux используется Ctrl, на Mac используется Cmd. Там, где пользователь Windows нажимает Ctrl+F2 или Ctrl+B, пользователь Mac нажмёт Cmd+F2 или Cmd+B.


Более того, даже если бы вы захотели заставить пользователей Mac использовать именно Ctrl+click – это было бы весьма затруднительно. Все дело в том, что обычный клик с зажатым Ctrl под Mac работает как правый клик и генерирует событие oncontextmenu, а вовсе не onclick, как под Windows/Linux.

Решение состоит втом, чтобы пользователи обоих операционных систем работали с комфортом, в паре с ctrlKey нужно обязательно использовать metaKey.

Ну а в коде это означает, что для удобства пользователей Mac вам нужно проверять if (event.ctrlKey || event.metaKey).

Координаты в окне: clientX/Y

Все события мыши предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.

Пара свойств clientX/clientY будет содержать координаты курсора относительно текущего окна.

При этом, например, если ваше окно размером 300×300, а мышь находится в центре, тогда и clientX и clientY будут равны 150.

И вы можете как угодно прокручивать страницу, но если при этом не двигать мышь, то соотвественно координаты курсора clientX/clientY не изменятся, потому что они считаются относительно окна, а не документа.

Вот пример обработки координат курсора:

В той же системе координат работает и функция elem.getBoundingClientRect(), возвращающая координаты элемента, а также и position:fixed.

Относительно документа: pageX/Y

Координаты курсора относительно документа находятся в свойствах pageX/pageY.

Так как эти координаты – относительно левого-верхнего узла документа, а не окна, то они будут учитывать прокрутку документа. Если прокрутить страницу, а мышь при этом не трогать, то координаты курсора pageX/pageY изменятся на естественно на величину прокрутки, они будут привязаны к конкретной точке в документе.

Пример считывания координат курсора относительно документа.

В той же системе координат работает position:absolute, если элемент позиционируется относительно документа.

Некоторые браузеры поддерживают и свойства event.x/y, event.layerX/layerY.

Эти свойства устарели, они нестандартные и не добавляют ничего к описанным выше. Использовать их не стоит.

Итоги

События мыши имеют следующие свойства:

  • Кнопка мыши: which
  • Элемент, который вызвал событие: target
  • Координаты, относительно окна: clientX/clientY
  • Координаты, относительно документа: pageX/pageY
  • Если зажата спец. клавиша (shift, alt, ctrl), то стоит соответствующее свойство: altKey, ctrlKey, shiftKey или metaKey (Mac).
  • Для поддержки Ctrl+click надо проверить if (e.metaKey || e.ctrlKey), чтобы пользователи Mac тоже были довольны.

Задачи

Список с выделением

Эта задача состоит из 2-х частей.

  1. Сделайте список, элементы которого можно выделять кликом.
  2. Добавьте мульти-выделение. Если клик с нажатым Ctrl (Cmd под Mac), то элемент должен добавляться-удаляться из выделенных.

Дерево: проверка клика на заголовке

Есть кликабельное JavaScript-дерево UL/LI .

При клике на заголовке его список его детей скрывается-раскрывается.

Однако, проблема в том, что скрытие-раскрытие происходит даже при клике вне заголовка, на пустом пространстве справа от него.

Как скрывать/раскрывать детей только при клике на заголовок?

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Илон Маск рекомендует:  Что такое код asp accessssl
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL