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

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

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

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

Познакомимся с событиями mouseover и mouseout. Первое событие — mouseover — возникает в тот момент, когда мышь появляется в области элемента. Второе событие — mouseout — происходит в момент ухода мыши из области элемента. Давайте протестируем. Возьмем блок из исходников предыдущего урока:

<div class="block"></div>

И повесим на него два искомых события:

$('.block').mouseover(function(){
 console.log('Мышь появилась над элементом');
}).mouseout(function(){
 console.log('Мышь ушла с элемента');
});

Теперь при заходе мыши в область блока мы увидим в консоли соответствующее сообщение, а при выходе — другое.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Теперь попробуем доработать скрипт из предыдущего урока. На самом деле дорабатывать много и не придется, всего-то добавить слежение за событием ухода мыши — mouseout:

$(function(){
 $('.block').mousemove(function(e){
  var top = e.pageY + 15,
 left = e.pageX + 15;
  $('.tooltip').css({
 "left": left,
 "top": top,
 "display": "block"
  });
 }).mouseout(function(){
  $('.tooltip').css({
 "display": "none"
  });
 });
});

Когда наступает событие mouseout, мы просто делаем блок подсказки невидимым. Достаточно просто, не так ли. Вместе с тем, несмотря на простоту кода, мы реализовали достаточно эффектное решение.

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree