JS об'єкт MouseEvent

Загальний опис

MouseEvent – це набір подій JavaScript, пов'язаних із взаємодією користувача з мишею. До них належать події натискання, наведення, переміщення миші та інші дії. Основні події миші: click (клік), dblclick (подвійний клік), mousedown (натискання кнопки миші), mouseup (відпускання кнопки миші), mousemove (переміщення курсора), mouseover (наведення на елемент), mouseout (вихід курсора за межі елемента) тощо.

Щоб працювати з подіями миші, зазвичай використовують метод addEventListener, який дозволяє додати обробник до конкретної події на елементі. Наприклад:

document.getElementById('myElement').addEventListener('click', function(event) {
  console.log('Елемент було клікнуто!');
});

У цьому прикладі обробник події виконує функцію при кліку на елемент з ідентифікатором myElement, виводячи повідомлення в консоль.

Для MouseEvent часто використовують об'єкт event, що передається до обробника події. Він містить корисну інформацію про подію, зокрема координати курсора миші (event.clientX та event.clientY), яка кнопка миші була натиснута (event.button), та інші деталі.

Ще один корисний приклад – mousemove, який активується щоразу, коли користувач переміщує мишу. Це часто використовується для створення інтерактивних ефектів:

document.addEventListener('mousemove', function(event) {
  console.log('Курсор на позиції:', event.clientX, event.clientY);
});

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

Події миші також можуть підтримувати взаємодії з іншими подіями, як-от keydown чи touchstart, для забезпечення більшої доступності інтерфейсу. Щоб видалити обробник події, можна використовувати метод removeEventListener, який приймає назву події і функцію, яку необхідно видалити.

правити

Порада

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

автор: Bond правити

Порада

Використовуйте mouseover та mouseout з обережністю – ці події можуть активуватися щоразу, коли курсор минає вкладені елементи. Щоб уникнути цього, можна використовувати mouseenter і mouseleave, які спрацьовують лише при вході або виході з конкретного елемента.

автор: Bond правити

Порада

Для уникнення випадкових кліків під час навігації через інтерфейс, можна перевіряти тип кнопки, використовуючи event.button. Це допоможе розрізняти лівий, правий і середній клік.

Подія contextmenu дозволяє налаштувати користувацьке контекстне меню, заблокувавши стандартне меню:

element.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  // ваше меню
});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('eventName', function(event) {
  // код обробника події
});

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	10.6	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="draggable">Демонстраційний елемент</div>

const element = document.getElementById('draggable');
element.addEventListener('mousedown', function(event) {
  const startX = event.clientX - element.offsetLeft;
  const startY = event.clientY - element.offsetTop;
  function onMouseMove(event) {
    element.style.left = `${event.clientX - startX}px`;
    element.style.top = `${event.clientY - startY}px`;
  }
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
});

document.addEventListener('mousedown', function(event) {
  const startX = event.clientX;
  const startY = event.clientY;
  function onMouseMove(event) {
    const width = event.clientX - startX;
    const height = event.clientY - startY;
    console.log('Розмір виділення:', width, height);
  }
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', onMouseMove);
  }, { once: true });
});