Работа с событиями в 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