Події миші

У цьому розділі ми докладніше розглянемо події миші та їх властивості.

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

Типи подій миші

Ми вже бачили деякі з цих подій:

mousedown/mouseup

Клікання/відпускання кнопки миші над елементом.

mouseover/mouseout

Курсор заходить/виходить з елемента.

mousemove

Кожне переміщення миші над елементом викликає цю подію.

click

Спрацьовує після mousedown, а потім mouseup над тим же елементом, якщо була використана ліва кнопка миші.

dblclick

Спрацьовує після двох кліків на одному елементі за короткий проміжок часу. На сьогоднішній день рідко використовується.

contextmenu

Спрацьовує при натисканні правої кнопки миші. Є й інші способи відкрити контекстне меню, напр. за допомогою спеціальної клавіші на клавіатурі, але це вже не зовсім подія миші.

…Також існують кілька інших подій, про них ми розповімо пізніше.

Порядок подій

Як ви можете бачити зі списку вище, дія користувача може викликати безліч подій.

Наприклад, клік лівою кнопкою спочатку ініціює mousedown, коли кнопку натиснуто, потім mouseup і click, коли її відпускають.

У випадках, коли одна дія ініціює декілька подій, їх порядок фіксується. Тобто обробники викликаються в порядку mousedown → mouseup → click.

Клікніть кнопку нижче, і ви побачите події. Спробуйте також клікнути двічі.

Всі події миші реєструються у тестовому вікні нижче, і якщо між ними є затримка більше 1 секунди, вони розділяються горизонтальною лінією.

Також ми можемо побачити властивість button, яка дозволяє виявити яку саме кнопку миші клікнули, це пояснюється нижче.

Кнопка миші

Події, пов’язані з кліками, завжди мають властивість button, що дозволяє отримати точну кнопку миші.

Зазвичай ми не використовуємо її для подій click і contextmenu, оскільки перше відбувається лише при натисканні лівою кнопкою миші, а останнє – лише при натисканні правою кнопкою миші.

З іншого боку, обробникам mousedown та mouseup може знадобитися event.button, тому що ці події запускаються на будь-якій кнопці, тому button дозволяє розрізняти “праву кнопку миші” та “ліву кнопку миші”.

Можливі значення event.button:

Більшість пристроїв мають лише ліву та праву кнопки, тому можливі значення 0 або 2. Сенсорні пристрої також генерують подібні події, коли на них натискають.

Також є властивість event.buttons, яка містить усі натиснуті кнопки як ціле число, по одному біту на кнопку. На практиці ця властивість використовується дуже рідко, деталі можна знайти на сторінці MDN, якщо вона вам колись знадобиться.

Модифікатори: shift, alt, ctrl і meta

Усі події миші містять інформацію про натиснуті клавіші-модифікатори.

Властивості події:

• shiftKey: Shift
• altKey: Alt (чи Opt для Mac)
• ctrlKey: Ctrl
• metaKey: Cmd для Mac

Вони мають значення true, якщо відповідна клавіша була натиснута під час події.

Наприклад, кнопка нижче працює лише на Alt+Shift + клік:

<button id="button">Alt+Shift+Клікни мене!</button>

<script>
  button.onclick = function(event) {
    if (event.altKey && event.shiftKey) {
      alert('Ура!');
    }
  };
</script>

Координати: clientX/Y, pageX/Y

Усі події миші надають координати у двох варіантах:

1. Відносно Window: clientX та clientY.
2. Відносно Document: pageX та pageY.

Ми вже розглянули різницю між ними у розділі Координати.

Коротше кажучи, відносні до документа координати pageX/Y відраховуються від лівого верхнього кута документа і не змінюються під час прокручування сторінки, тоді як clientX/Y відраховуються від лівого верхнього кута поточного вікна. Коли сторінка прокручується, вони змінюються.

Наприклад, якщо у нас є вікно розміром 500x500, а миша знаходиться в лівому верхньому куті, то clientX і clientY дорівнюють 0, незалежно від того, як прокручується сторінка.

А якщо миша знаходиться в центрі, то clientX і clientY дорівнюють 250, незалежно від того, яке місце в документі це. У цьому аспекті вони схожі на position:fixed.

Наведіть курсор миші на поле введення, щоб побачити clientX/clientY (приклад знаходиться в iframe, тому координати є відносно цього iframe):

<input onmousemove="this.value=event.clientX+':'+event.clientY" value="Наведіть курсор на мене">

Запобігання виділенню при наведенні миші

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

Наприклад, подвійний клік на тексті нижче виділяє його на додаток до нашого обробника:

<span ondblclick="alert('dblclick')">Клікни мене двічі</span>

Якщо натиснути ліву кнопку миші і, не відпускаючи її, пересунути, це також додасть виділення, часто небажане.

Існує кілька способів запобігти виділенню, про які ви можете прочитати в розділі Selection і Range.

У цьому конкретному випадку найрозумнішим способом є запобігання дії браузера на mousedown. Таким чином ми запобігнемо двом виділенням:

До...
<b ondblclick="alert('Клік!')" onmousedown="return false">
  Клікни мене двічі
</b>
...Після

Тепер виділений жирним елемент не виділяється подвійними кліком, і натискання на ньому лівої кнопки не почне виділення.

Зверніть увагу: текст всередині нього все ще можна виділити. Однак виділення слід починати не з самого тексту, а до або після нього. Зазвичай, це нормально сприймається користувачами.

<div oncopy="alert('Копіювання заборонено!');return false">
  Шановний користувач,
  Копіювання заборонено.
  Якщо ви знаєте JS або HTML, ви можете отримати все з джерела сторінки.
</div>

Підсумки

Події миші мають такі властивості:

• Кнопка: button.

• Клавіші-модифікатори (true, якщо їх натиснути): altKey, ctrlKey, shiftKey і metaKey (Mac).

  • Якщо ви хочете працювати з Ctrl, то не забувайте про користувачів Mac, вони зазвичай використовують Cmd, тому краще перевірити if (e.metaKey || e.ctrlKey).

• Координати відносно Window: clientX/clientY.

• Координати відносно Document: pageX/pageY.

Типова дія браузера mousedown – виділення тексту, якщо в інтерфейсі воно швидше заважає, йому слід запобігти.

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