От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. Мы уже познакомились с достаточно полезным событием мыши — mousemove, которое возникает при движении мыши. В этой статье мы познакомимся с еще несколькими событиями мыши.
Итак, в предыдущей статье мы работали с событием mousemove и даже написали небольшой скрипт, который реализует функционал подсказки, двигающейся вслед за курсором мыши. Однако, одного этого события нам не хватает, поскольку подсказка должна показываться только тогда, когда мышь двигается в определенной области. Если же она выходит за границы области, тогда подсказка должна скрываться.
Познакомимся с событиями mouseover и mouseout. Первое событие — mouseover — возникает в тот момент, когда мышь появляется в области элемента. Второе событие — mouseout — происходит в момент ухода мыши из области элемента. Давайте протестируем. Возьмем блок из исходников предыдущего урока:
|
1 |
<div class="block"></div> |
И повесим на него два искомых события:
|
1 2 3 4 5 |
$('.block').mouseover(function(){ console.log('Мышь появилась над элементом'); }).mouseout(function(){ console.log('Мышь ушла с элемента'); }); |
Теперь при заходе мыши в область блока мы увидим в консоли соответствующее сообщение, а при выходе — другое.
Теперь попробуем доработать скрипт из предыдущего урока. На самом деле дорабатывать много и не придется, всего-то добавить слежение за событием ухода мыши — mouseout:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(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у вы можете узнать из наших уроков или курса. Удачи!
