Робота з подіями в jQuery. Частина 2

34

Від автора: вітаю вас, друзі. У цій статті ми продовжимо вивчення подій у jQuery. Зокрема, ми познайомимося з деякими з подій, пов’язаними з рухом курсора миші. Приступимо.

Отже, перший метод, з яким ми познайомимося, відповідає за подія руху миші — це метод mousemove. Давайте подивимося приклад. Створимо довільний блок:

І ініціалізуємо для нього відстежує рухи миші:

$(‘div’).mousemove(function(){
console.log(‘Рух’);
});

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

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

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

$(‘div’).mousemove(function(e){
console.log(‘X:’ + e.pageX, ‘Y:’ + e.pageY);
});

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

.block{
border: 1px solid #ccc;
width: 500px;
height: 300px;
}
.tooltip{
position: absolute;
padding: 5px;
background: #555;
color: #fff;
border-radius: 5px;
font: 13px Verdana;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
display: none;
width: 180px;
}

Підказка

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

$(function(){
$(‘.block’).mousemove(function(e){
var top = e.pageY,
left = e.pageX;
$(‘.tooltip’).css({
«left»: left,
«top»: top,
«display»: «block»
});
});
});

Тепер при початку руху миші всередині блоку ми робимо наступне: отримуємо координати X і Y в кожен конкретний момент руху; за допомогою методу css змінюємо стилі блоку підказки.

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

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

var top = e.pageY + 15,
left = e.pageX + 15;

Тепер курсор миші не зможе зловити блок підказки. Як вирішити другу проблему ми дізнаємося вже в наступній частині статті. Заодно познайомимось ще з кількома методами для роботи з подіями. На цьому ми завершимо поточну статтю. Вихідні коди до статті можна завантажити за посиланням. Більше і jQuerу ви можете дізнатися з наших уроків або курсу. Удачі!