JS властивість Event.which (Mouse)

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

which — це властивість об'єкта події MouseEvent, яка повертає значення, що відповідає кнопці миші, натиснутій під час події. Вона використовується для виявлення того, яка кнопка була натиснута: ліва, права або середня. Ця властивість повертає числове значення: 1 для лівої кнопки, 2 для середньої, 3 для правої.

Раніше властивість which була популярною для обробки подій миші, однак сьогодні рекомендується використовувати більш сучасну властивість button. Однак which все ще використовується для сумісності з застарілими браузерами або специфічними випадками, коли підтримка старих браузерів є критичною.

Коли користувач натискає на елемент за допомогою миші, подія миші може бути перехоплена за допомогою слухача подій, наприклад, для подій mousedown, mouseup або click. У таких подіях ви можете отримати доступ до властивості which, щоб визначити, яка саме кнопка миші була використана. Ось простий приклад:

document.addEventListener('mousedown', function(event) {
  if (event.which === 1) {
    console.log('Натиснута ліва кнопка миші.');
  } else if (event.which === 2) {
    console.log('Натиснута середня кнопка миші.');
  } else if (event.which === 3) {
    console.log('Натиснута права кнопка миші.');
  }
});

Як видно з прикладу, за допомогою перевірки значення event.which, можна точно визначити, яка кнопка була натиснута. Якщо ви працюєте з сучасними браузерами, слід звертати увагу на властивість button, оскільки вона надає більше можливостей для точного контролю.

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

правити

Порада

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

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

Порада

Уникайте використання which для подій, пов'язаних із сенсорними екранами, оскільки вона не повертає ніяких значень. Замість цього використовуйте інші властивості, такі як pointerType, для відстеження дотиків або стилуса.

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

Порада

Не забувайте про те, що різні операційні системи та браузери можуть мати різні поведінкові відмінності при натисканні середньої або правої кнопок миші. Завжди тестуйте свій код у кількох браузерах та середовищах.

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

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

Синтаксис

event.which

Переглядачі

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

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

Переглядач
	1	1	1	15	79

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

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

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

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

Приклади

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

document.addEventListener('mousedown', function(event) {
  if (event.which === 3) {
    alert('Праве клацання - відкриваємо контекстне меню.');
  }
});

document.addEventListener('mousedown', function(event) {
  if (event.which === 2) {
    alert('Середня кнопка миші натиснута.');
  }
});