Работа с событиями в jQuery. Часть 2

Работа с событиями в jQuery

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

Итак, первый метод, с которым мы познакомимся, отвечает за событие движения мыши — это метод mousemove. Давайте посмотрим пример. Создадим произвольный блок:

И инициализируем для него отслеживание события движения мыши:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Работа с событиями в jQuery

Теперь при движении мыши на элементе мы можем сделать что-то полезное, например показывать всплывающую подсказку, которая будет двигаться вслед за курсором мыши. Для того, чтобы реализовать такую задачу, нам, конечно же потребуется объект события и его свойства pageX и pageY, в которых хранятся координаты курсора:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

Блок подсказки изначально скрыт и по задумке он должен появиться в момент движения мыши внутри элемента с классом block. Также для блока подсказки мы задали абсолютное позиционирование, чтобы управлять в последующем его координатами. И небольшой скрипт:

Теперь при начале движении мыши внутри блока мы делаем следующее: получаем в координаты X и Y в каждый конкретный момент движения; с помощью метода css изменяем стили блока подсказки.

Работа с событиями в jQuery

Данный скрипт пока что далек от идеала. Например, курсор мыши при желании может «залезть» на блок подсказки. Также блок подсказки не скрывается, когда курсор мыши уходит из основного блока. Собственно, первую проблему можно решить прямо сейчас, для этого просто достаточно немного увеличить значения переменных top и left, скажем на 15 пикселей:

Теперь курсор мыши не сможет поймать блок подсказки. Как решить вторую проблему мы узнаем уже в следующей части статьи. Заодно познакомимся еще с несколькими методами для работы с событиями. На этом мы завершим текущую статью. Исходники к статье можно скачать по ссылке. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите 3-х минутное видео и у Вас будет четкий пошаговый план по созданию сайта с нуля!

Смотреть видео

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree